React对接Firestore时querySnapshot.map报错forEach正常

• 核心触发点：Firebase返回的querySnapshot是SDK封装的自定义类实例，并非JavaScript原生数组。该实例原型上仅实现了forEach遍历方法，没有挂载数组原型的map/filter等方法，因此直接对querySnapshot调用.map()会直接抛出「xxx.map is not a function」类型错误，这也是forEach能正常打印数据、换map就报错的根本原因。
• 次高频触发场景：如果已经取了querySnapshot.docs属性再调用map仍报错，通常是两个问题：
  • 存储查询结果的state初始值没有设置为空数组，数据异步加载完成前变量值为undefined，调用map方法直接报错
  • 遍历生成<Card />组件时没有给列表项设置唯一的key属性，触发React列表渲染规则报错

正确的取数、遍历渲染示例代码如下：

import { useState, useEffect } from "react";
import { getDocs, collection } from "firebase/firestore";
import { db } from "./firebase-config"; // 引入你项目里初始化的Firebase实例
import Card from "./Card";

export default function CardList() {
  // 注意：初始值必须设为空数组，避免异步加载阶段调用map报错
  const [dataList, setDataList] = useState([]);

  useEffect(() => {
    const fetchCollectionData = async () => {
      const querySnapshot = await getDocs(collection(db, "你的目标集合名称"));
      // 正确做法：取querySnapshot的docs属性（这是一个文档对象组成的原生数组），再调用map
      const formattedData = querySnapshot.docs.map((doc) => ({
        id: doc.id, // 拿Firebase生成的文档唯一id作为列表key，不要用遍历下标
        ...doc.data(),
      }));
      setDataList(formattedData);
    };
    fetchCollectionData();
  }, []);

  return (
    <div className="list-wrapper">
      {dataList.map((item) => (
        // 列表项必须传唯一key属性
        <Card key={item.id} cardData={item} />
      ))}
    </div>
  );
}

如果按照上述写法修改后仍有报错，可以在调用map的位置前加一行console.log(Array.isArray(待遍历的变量))，如果打印结果为false，说明当前遍历目标不是数组，需要先转换为数组格式再调用数组方法。

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