如何在 firestore 中获取 collection 中的所有文档？

Question

我正在尝试获取我的 collection 中的所有文档，但日志 return 是一个空数组，并且我收到一条错误消息，指出无法读取属性 of undefined reading forEach .我已经按照文档进行操作，但找不到问题出在哪里。有人可以帮忙吗？下面的代码片段是我在 index.js 中使用的自定义挂钩，如下所示。此日志 return 一个空数组。

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

Answer 1

如果我没记错的话，查询快照是您调用 getDocs 时等待的 return 值。您还在 forEach 回调中每次重新声明 document 数组，它应该在外部循环中声明，以及 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 };
}

Answer 2

Drew 的给你一次文件，所以 .

但是，如果您想监听文档的更新，并在您的 UI 中显示这些更新，请使用 onSnapshot 而不是 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])
}

这个：

使用 onSnapshot 而不是 getDocs，这样您还可以监听数据更新。
不再 returns docs 状态变量，因为这似乎容易出错。
现在正确 returns 取消订阅 onSnapshot 侦听器的函数。

如何在 firestore 中获取 collection 中的所有文档？

How to get all documents in a collection in firestore?

javascript

google-cloud-firestore

react-hooks

use-state