How to get all documents in a collection in firestore?

user_15989850 0
Viewed 1212

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 };
  
}
use-state google-cloud-firestore react-hooks javascript
2 Answers

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

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:

  • Uses onSnapshot instead of getDocs so that you also listen for updates to the data.
  • No longer returns the docs state variable, as that seems error prone.
  • Now correctly returns a function that unsubscribes the onSnapshot listener.
user_2091030
Related