如何使用Cloud Firestore模块化Web SDK版本9获取集合所有文档？及解决querySnapshot.map不是函数的报错问题

错误原因分析 #

你遇到的TypeError: querySnapshot.map is not a function核心原因是：Firestore v9的QuerySnapshot对象本身不是数组，它没有自带map方法。你需要访问它的docs属性——这个属性才是包含所有文档快照的数组，只有这个数组才能用map遍历。

另外你的代码还有两个需要修正的细节：

• 直接在组件顶层调用getMakers()会导致组件每次渲染都重复执行这个异步函数，引发无限循环
• setNames((doc.id = doc.data()))的写法逻辑错误，这是赋值操作，而且每次循环都更新状态会触发不必要的组件重渲染

正确实现代码 #

下面是修正后的React组件代码，包含完整的错误处理和最佳实践：

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

function CurrentUser() {
  const [names, setNames] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  async function getMakers() {
    try {
      const querySnapshot = await getDocs(collection(db, "users"));
      // 遍历querySnapshot.docs数组，合并文档ID与数据
      const userList = querySnapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      // 一次性将所有数据更新到状态，避免多次重渲染
      setNames(userList);
    } catch (err) {
      setError(err.message);
      console.error("获取用户文档失败:", err);
    } finally {
      setLoading(false);
    }
  }

  // 用useEffect包裹异步函数，确保仅在组件挂载时执行一次
  useEffect(() => {
    getMakers();
  }, []);

  // 处理加载、错误状态，提升用户体验
  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错了: {error}</div>;

  return (
    <div>
      {names.map(user => (
        <div key={user.id}>{user.firstName}</div>
      ))}
    </div>
  );
}

export default CurrentUser;

关键改动说明 #

1. 遍历正确的数组：使用querySnapshot.docs.map(...)替代直接对querySnapshot调用map，因为docs才是存储文档快照的数组
2. 合并文档ID与数据：将文档ID和数据合并为一个对象，既保留了Firestore的文档标识，也方便后续用id作为React元素的key
3. 控制异步函数执行时机：用useEffect包裹异步函数并设置空依赖数组，确保仅在组件首次挂载时执行一次，避免无限循环
4. 状态完整性处理：添加加载、错误状态的展示，让用户能感知请求状态，同时用try/catch捕获请求异常，避免组件崩溃

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