React项目中如何遍历渲染Firestore嵌套集合中的数据

问题排查 #

• 数据拉取逻辑冗余：你在forEach循环里重复执行setBlogs，同一个值会被设置多次，属于无用逻辑，还会触发多次重渲染。
• 渲染层索引访问不合理：Firestore单文档调用data()方法返回的是对象类型，你直接用items[1]访问对象索引，除非你文档内存储的是数组结构，否则必然返回undefined，导致读取name属性报错。

修正后完整代码 #

import { useState, useEffect } from 'react';

function Pull() {
  const [blogs, setBlogs] = useState([])

  const fetchBlogs = async () => {  
    const collectionRef = firestore.collection('customer');
    const snapshot = await collectionRef.get();
    // 单次映射拿到所有文档数据，避免循环setState
    const blogList = snapshot.docs.map(doc => doc.data());
    setBlogs(blogList);
    // 打开控制台查看每个文档的实际结构，确认嵌套字段名称
    console.log('拉取到的集合数据：', blogList);
  }
      
  useEffect(() => {
    fetchBlogs();
  }, [])

  return (
    <div className="App">
      {/* 第一层遍历：遍历集合内的所有文档 */}
      {blogs.map((doc, docIndex) => (
        <div key={docIndex}>
          {/* 第二层遍历：遍历文档内的嵌套数组，把list换成你实际的嵌套数组字段名 */}
          {doc.list?.map((nestedItem, itemIndex) => (
            <p key={itemIndex}>{nestedItem.name}</p>
          ))}
        </div>
      ))}
    </div>
  );
}

注意事项 #

• 你需要把代码里的list替换成你Firestore文档里实际存储的嵌套数组的字段名，你可以打开控制台看刚才打印的blogList结构，找到对应嵌套字段的键名即可。
• 如果你的嵌套结构是对象而不是数组，不需要二次遍历，直接通过doc.嵌套对象名.name的方式访问即可。

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