Firebase 类型错误：querySnapshot.forEach 在 React 中不是 function

Question

我第一次将 firebase 与 React 集成，我只是按照文档进行操作，这是 firebase cloud firestore getStarted部分中给出的代码：

但是当我试图复制相同的代码时，它给我一个TypeError: querySnapshot.forEach is not a function

我基本上是在尝试从集合、文档中获取数据。

这是我复制的代码：

import React, { useState, useEffect, useRef } from "react";
import { db } from "./firebase.config.js";
import * as firestore from "firebase/firestore";
export default function App() {
    const addEntry = () => {
        try {
            const docRef = firestore.addDoc(firestore.collection(db, "users"), {
                first: "Alan",
                middle: "Mathison",
                last: "Turing",
                born: 1912,
            });
            console.log("Document written with ID: ", docRef.id);
        } catch (e) {
            console.error("Error adding document: ", e);
        }
    };
    const querySnapshot = firestore.getDocs(firestore.collection(db, "users"));
    console.log(querySnapshot);
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id} => ${doc.data()}`);
    });

return (
    <div>
        <button onClick={addEntry}>add</button>
    </div>
   );
}

我该如何解决这个错误

Answer 1

getDocs()返回 promise 并且在您尝试阅读文档时可能未解析。 尝试重构代码，如下所示：

firestore.getDocs(firestore.collection(db, "users")).then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        console.log(`${doc.id} => ${doc.data()}`);
    });
});

您也可以只导入getDocs()而不是使用像 V8 SDK 这样的命名空间：

import { getDocs } from "firebase/firestore";