使用Firebase JS SDK v9的collectionGroup获取posts子集合时map报错如何解决

• 核心错误：querySnapshot.forEach() 没有返回值，你直接将它的返回值传给setPosts，导致posts状态被赋值为undefined，后续调用map方法时自然触发类型错误。Firestore的QuerySnapshot对象需要先取.docs属性拿到所有文档组成的数组，再用map遍历转换为需要的数据集。
• 次要隐患：useEffect的回调函数不能直接声明为async。async函数默认返回Promise，而useEffect的返回值只能是清理函数或者undefined，直接写async回调可能导致内存泄漏、请求竞态等问题。

数据获取部分 #

const [posts, setPosts] = useState([]);

useEffect(() => {
  // 把异步逻辑封装在内部函数中
  const fetchPosts = async () => {
    const querySnapshot = await getDocs(
      query(collectionGroup(db, "posts"), orderBy("createdAt", "desc"))
    );
    // 遍历docs数组转换数据，拿到最终的帖子列表
    const postList = querySnapshot.docs.map(doc => doc.data());
    setPosts(postList);
  };

  fetchPosts();
}, []);

渲染部分（可选优化） #

可以加可选链做异常防护，避免极端场景下报错：

<ScrollView>
  {posts?.map((post, i) => (
    <Post post={post} key={i} />
  ))}
</ScrollView>;

如果后续需要用到文档id做更新、删除操作，转换数据时可以把id也合并到对象中：

const postList = querySnapshot.docs.map(doc => ({
  id: doc.id,
  ...doc.data()
}));

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