我如何在 useEffect 挂钩中从 firestore 数据库获取 map 数据

Question

我正在尝试从 firestore 数据库中获取一些数据并将其保存到一个数组中进行反应。 这是我的代码。

    const readDocuments = async () => {          
        const allData = await getDocs(collectionRef);
        //console.log(allData);
        // allData.forEach((doc) => {
        //     console.log(doc.id, " => ", doc.data());
        // });
        setData(allData.docs.map((doc) => ({
            ...doc.data(), id: doc.id
        })))
        console.log(data);
        //return allData;
    };

当我检查控制台时，这就是我得到的。

不太确定我在这里做错了什么。 我在教程中看到了几乎相同的方法。 如果我取消注释 function 中的 foreach 循环，它会正确输出数据，所以我认为这不是实际检索信息的问题。

编辑：上面的 function 嵌套在 useEffect 挂钩中。

Answer 1

import { useEffect, useState } from "react";
import { collection, getDocs } from "firebase/firestore";
import { db } from "../firebase/config";

const useGetDocs = (collectionName) => {
    const [documents, setDocuments] = useState([]);

    //Firebase Collection Reference
    const postCollectionRef = collection(db, collectionName);

    useEffect(() => {
        const getDocuments = async () => {
            const data = await getDocs(postCollectionRef);
            setDocuments(data.docs.map((doc) => ({...doc.data(), id: doc.id})));
        };

        getDocuments();
    }, []);

    return { documents };
}
 
export default useGetDocs;

这是我使用的完整文件，现在可以使用了。 不一定确定之前出了什么问题，但我所做的主要更改是使用“use”关键字将其创建为自定义挂钩，这可能与它有关。 我无论如何都不是专家，仍然可能做错事，但希望这对遇到类似问题的人有所帮助。

干杯!

Answer 2

如果您查看文档，他们会向您展示具体操作方法。

import { collection, query, where, getDocs } from "firebase/firestore";

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});