Firestore数据加载后从UI消失问题求助（附代码）

问题现象 #

使用Firebase v9.15.0从Firestore的posts集合获取所有文档并渲染列表时，数据会短暂出现在UI上，随后立刻消失。

问题原因 #

1. 异步遍历错误：原代码在querySnapshot.forEach中使用async/await，但forEach不支持异步等待，会直接执行后续代码，导致getDocValue提前返回空对象，此时setPosts将状态设为空，UI内容被清空。
2. 冗余文档请求：querySnapshot中的文档对象已包含完整数据，无需再调用getDoc重复请求Firestore，既浪费资源又加剧异步时序问题。

修复代码 #

修复后的getDocValue函数 #

async function getDocValue() {
  const querySnapshot = await getDocs(collection(db, "posts"));
  // 用reduce直接将文档转换为对象，同步处理无异步问题
  return querySnapshot.docs.reduce((postsObj, doc) => {
    postsObj[doc.id] = doc.data();
    return postsObj;
  }, {});
}

完整的Pubs.jsx代码 #

import db from '../context/fireb'
import { useState, useEffect} from 'react'
import { getDocs, collection } from "firebase/firestore";

async function getDocValue() {
  const querySnapshot = await getDocs(collection(db, "posts"));
  return querySnapshot.docs.reduce((postsObj, doc) => {
    postsObj[doc.id] = doc.data();
    return postsObj;
  }, {});
}

function Pub() {
  const [posts, setPosts] = useState({});

  useEffect(() => {
    async function fetchData() {
      const newPosts = await getDocValue();
      setPosts(newPosts);
    }
    fetchData();
  }, []);
  
  return (
    <div>
      {Object.keys(posts).length > 0 ? (
        <div>
          {Object.keys(posts).map(key => (
            <div key={key}>
              <h1>{posts[key].title}</h1>
              <p>{posts[key].message}</p>
            </div>
          ))}
        </div>
      ) : (
        <p>暂无数据</p>
      )}
    </div>
  );
}

export default Pub

额外优化说明 #

• 用Object.keys(posts).length > 0替代原有的posts判断，避免空对象被判定为真值导致显示空内容
• 移除冗余的getDoc调用，减少Firestore请求次数，提升加载效率

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