React中使用Firebase Firestore getDocs展示数据遇setState问题

你的代码存在几个关键问题，导致无法正确设置状态并渲染数据：

• 错误地在forEach循环中重复设置状态，且直接存储Firestore的QuerySnapshot对象而非可直接使用的数据数组
• setState是异步操作，因此getData内的console.log无法立即获取更新后的状态
• 渲染时使用forEach无法生成JSX元素，且未正确访问快照中的文档数据
• 初始状态设为null，导致长度判断逻辑异常

修正后的代码 #

1. 状态初始化修正 #

将初始状态从null改为空数组，简化后续判断逻辑：

const [takes, setTakes] = useState([]);

2. 数据获取函数修正 #

将Firestore快照转换为普通JS对象数组，统一设置状态：

const getData = async () => {
  if (user) {
    const docRef = doc(db, "users", user.uid);
    const collectionRef = collection(docRef, "takes");
    const querySnapshot = await getDocs(collectionRef);
    
    // 将快照文档转换为包含ID和数据的数组
    const takesData = querySnapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
    
    setTakes(takesData);
    console.log("获取到的数据:", takesData);
  } else {
    console.log("当前无可用用户");
  }
};

3. 渲染逻辑修正 #

使用map生成JSX元素，正确处理空数据和列表渲染：

<div>
  <Image borderRadius={"50%"} src={user?.photoURL} alt="photo" />
  <Text>
    <i>{user?.displayName}</i>
  </Text>
  {takes.length === 0 ? (
    <Heading>{`${username} 还没有任何观点`}</Heading>
  ) : (
    takes.map((take) => (
      <HotTakes key={take.id} take={take.take} />
    ))
  )}
</div>

关键修正说明 #

1. 状态初始化：空数组避免了null带来的可选链判断冗余，直接通过length即可判断数据是否存在
2. 快照转换：将Firestore的QueryDocumentSnapshot转换为普通对象数组，便于后续渲染操作
3. 状态设置：仅在获取完所有数据后统一设置一次状态，避免不必要的组件重渲染
4. 列表渲染：forEach无返回值，改用map生成JSX元素数组，同时添加唯一key属性符合React渲染规范

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