He usado este componente para extraer datos, sin embargo, no puedo obtener el nombre del documento, es decir, "sampleCloudFunction" en CloudFunctionMonitor (consulte la imagen) de la base de datos y mostrarlo

docRef.id no funciona, no busco el ID sino el nombre real del subdocumento.

 <Card.Content> <Card.Header>{this.props.cloudFunction.docRef.id}</Card.Header> <Card.Description>{}</Card.Description> </Card.Content>

Código completo index.js:

 import "../../App"; import "semantic-ui-css/semantic.min.css"; import { Icon, Card, Button } from "semantic-ui-react"; import "semantic-ui-css/semantic.min.css"; import React, { Component } from "react"; import "semantic-ui-css/semantic.min.css"; export default class Cards extends Component { render() { return ( <Card color="green"> <Card.Content> <Card.Header>{this.props.cloudFunction.docRef.id}</Card.Header> <Card.Description>{}</Card.Description> </Card.Content> <Card.Content extra> <Icon name="cog" /> Records: {this.props.cloudFunction.lastRunLoad} <br /> <Icon name="cog" /> {this.props.cloudFunction.lastRunMessage} <br /> <Icon name="clock" /> Last Run:{" "} {this.props.cloudFunction.lastRunTime.toDate().toString()} <br /> <Icon name="angle double down" /> Schedule: {this.props.cloudFunction.schedule} </Card.Content> <Card.Content extra> <div className="ui two buttons"> <Button basic color="green"> Cloud Function </Button> </div> </Card.Content> </Card> ); } }

Consulta de Firestore

 useEffect(() => { const unsubscribe = FirestoreService.getCloudFunctionItems( (querySnapshot) => { const updatedCloundFunctions = querySnapshot.docs.map( (docSnapshot) => ({ guid: uuidV4(), ...docSnapshot.data(), }) ); console.log(updatedCloundFunctions); setCloudFunctions(updatedCloundFunctions); }, (error) => setError("list-item-get-fail") ); return unsubscribe; }, []);