I am trying to get all documents in my collection but the log return an empty array and i am having an error message that says cannot read property of undefined reading forEach. i have followed the documentation but can't find where the issue is. Can someone help, please? The code snippet below is a custom hook i am using it in my index.js as per following. this log return an empty array.
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 };
}
The query snapshot, if I'm not mistaken, is the return value you waited for when you called getDocs. You are also redeclaring the document array each time in the forEach callback, it should declared outside the loop, along with the setDocs state updater function.
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 };
}
Drew's answer gets you the documents once, so 🔼.
If you want to listen for updates to the documents however, and show those in your UI, use onSnapshot instead of 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])
}
This:
onSnapshot instead of getDocs so that you also listen for updates to the data.docs state variable, as that seems error prone.onSnapshot listener.