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 };
  
}

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 };
  
}

• javascript
• google-cloud-firestore
• react-hooks
• use-state

2 Answers 2

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