Firestore getDocs()方法异常：forEach与size属性无法正常调用

问题现象 #

尝试从Firestore的UsersData集合中获取Exercise字段值为Bench的文档时，出现以下问题：

• 调用getDocs()后，用forEach()遍历结果触发错误：TypeError: query.forEach is not a function. (In 'query.forEach(function (doc) {console.log(doc.data());})', 'query.forEach' is undefined)
• 尝试获取查询结果的文档数量时，size属性输出undefined
• 直接打印query得到的是Promise对象：

Promise {
  "_A": null,
  "_x": 0,
  "_y": 0,
  "_z": null,
}

错误原因 #

getPrData是异步函数（async），直接调用它会返回一个Promise实例，而非期望的QuerySnapshot对象。你试图在Promise上调用forEach和size，自然会报错——因为Promise本身没有这些方法和属性。

另外，size是QuerySnapshot的只读属性，不是方法，不能写成size()，必须直接访问。

修正后的代码 #

方式1：在useEffect中使用async/await #

export default function LogDrop() {
  useEffect(() => {
    // 定义内部异步函数处理查询
    const fetchAndProcessData = async () => {
      const querySnapshot = await getPrData();
      // 遍历文档
      querySnapshot.forEach((doc) => {
        console.log(doc.data());
      });
      // 获取文档数量
      console.log(querySnapshot.size);
    };

    fetchAndProcessData();
  }, []);

  return <div>...</div>; // 组件渲染内容
}

方式2：使用Promise的.then()方法 #

export default function LogDrop() {
  useEffect(() => {
    getPrData().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        console.log(doc.data());
      });
      console.log(querySnapshot.size);
    }).catch((error) => {
      // 处理查询错误
      console.error("获取数据失败:", error);
    });
  }, []);

  return <div>...</div>;
}

原getPrData函数无需修改（保持原样即可） #

const getPrData = async () => {
  const colRef = collection(db, "UsersData");
  const q = query(colRef, where("Exercise", "==", "Bench"));  
  const querySnapshot = await getDocs(q);
  return querySnapshot;
};

关键注意点 #

• 异步函数的返回值始终是Promise，必须通过await或.then()才能拿到实际的返回结果
• QuerySnapshot的size是属性，直接访问querySnapshot.size即可，不要加括号
• 可以通过querySnapshot.docs获取文档数组，用普通数组方法遍历（比如map、for...of），效果和forEach一致：

  for (const doc of querySnapshot.docs) {
    console.log(doc.data());
  }
  

内容的提问来源于stack exchange，提问作者Rcardona