调用.map()报is not a function错误，Firebase数据无法渲染列表如何解决？

报错原因 #

• 你直接将Firebase返回的querySnapshot快照对象赋值给了posts，该对象是Firebase专属类型不是数组，没有内置map方法，所以调用时报错。
• 你能使用forEach遍历是因为Firebase给querySnapshot单独封装了同名方法，仅支持遍历操作，无法返回JSX元素用于渲染。

修复方法 #

赋值时提取querySnapshot的docs属性即可，docs是存储所有查询到的文档的标准数组，支持map方法。

修改后的useEffect代码： #

useEffect(() => {
  db.collection('posts').onSnapshot((querySnapshot) => {
    // 提取标准文档数组赋值给posts
    setPosts(querySnapshot.docs);
  });
// 添加空依赖数组，避免组件更新时重复触发监听
}, []);

修改后你原本的渲染代码仅需要补全div标签缺失的>即可正常运行。

可选优化（推荐）： #

赋值时提前处理文档数据，渲染时不需要重复调用data()方法，同时可以拿到文档ID作为列表的唯一key，避免React控制台警告：

useEffect(() => {
  db.collection('posts').onSnapshot((querySnapshot) => {
    const postList = querySnapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }))
    setPosts(postList);
  });
}, []);

对应渲染代码可以简化为：

<div>
  {posts.map((post) => <p key={post.id}>{post.text}</p>)}
</div>

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