Estoy tratando de obtener todos los documentos en mi colección, pero el registro devuelve una matriz vacía y recibo un mensaje de error que dice que no se puede leer la propiedad de lectura indefinida para cada uno. He seguido la documentación pero no puedo encontrar dónde está el problema. ¿Puede alguien ayudar, por favor? El fragmento de código a continuación es un enlace personalizado que estoy usando en mi index.js según lo siguiente. este registro devuelve una matriz vacía.
const { docs } = useFireStore('barbers') console.log('docs',docs) import { useState, useEffect } from "react"; import { collection, getDocs, querySnapshot } from "firebase/firestore"; import {db} from '../../../base' export const useFireStore = (mycollection) => { const [docs, setdocs] = useState([]) useEffect(() => { const unsub = async () => { await getDocs(collection(db,mycollection)) querySnapshot.forEach((doc) => { let document =[]; // doc.data() is never undefined for query doc snapshots document.push({...doc.data() ,id: doc.id}); //console.log(doc.id, " => ", doc.data()); }); setdocs(document); } return () => unsub(); }, [mycollection]) return { docs }; }La instantánea de la consulta, si no me equivoco, es el valor de retorno que esperaba cuando llamó a getDocs . También está redeclarando la matriz de document cada vez que en la devolución de llamada forEach , debe declararse fuera del ciclo, junto con la función de actualización de estado setDocs .
export const useFireStore = (mycollection) => { const [docs, setDocs] = useState([]); useEffect(() => {\ const unsubscribe = async () => { const querySnapshot = await getDocs(collection(db,mycollection)); const document =[]; querySnapshot.forEach((doc) => { document.push({ ...doc.data(), id: doc.id }); }); setdocs(document); } return unsubscribe; }, [mycollection]); return { docs }; }La respuesta de Drew te da los documentos una vez, así que 🔼.
Sin embargo, si desea escuchar las actualizaciones de los documentos y mostrarlas en su interfaz de usuario, use onSnapshot en lugar de getDocs :
export const useFireStore = (mycollection) => { const [docs, setdocs] = useState([]) useEffect(() => { const unsub = onSnapshot(collection(db, mycollection), (querySnapshot) => { const documents = querySnapshot.docs.map((doc) => { return { ...doc.data(), id: doc.id } }); setdocs(documents); }); return () => unsub(); }, [mycollection]) }Este:
onSnapshot en lugar de getDocs para que también escuche las actualizaciones de los datos.docs , ya que parece propenso a errores.onSnapshot .