React组件需刷新才渲染且出现重复渲染问题求助

核心问题分析 #

1. 发送消息后需手动刷新才显示：使用getDocs是一次性拉取数据，不会监听Firestore的实时变化，新增数据后组件无法自动感知更新。
2. 刷新后消息重复渲染：一是querySnapshot函数循环调用setPosts时，闭包捕获的是旧的posts状态，导致!posts.includes(data.id)判断失效；二是React Strict Mode下useEffect会被执行两次，每次都往数组里追加数据，最终造成重复。

解决方案 #

1. 改用实时监听替代一次性拉取 #

用Firestore的onSnapshot替代getDocs，它会在数据库数据变化时自动触发回调，实现页面实时更新。

2. 批量更新状态，避免闭包与重复追加 #

不在循环中多次调用setPosts，而是一次性处理所有文档数据，直接替换整个posts数组，从根源避免依赖旧状态的判断逻辑出错。

3. 优化文档ID生成（可选但推荐） #

放弃手动维护nextId，用Firestore的addDoc自动生成唯一ID，避免本地计数与数据库数据不一致的问题。

修改后的代码示例 #

数据获取与实时监听 #

useEffect(() => {
  // 订阅Firestore实时更新
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    const newPosts = [];
    querySnapshot.forEach((doc) => {
      newPosts.push({
        id: doc.id,
        data: doc.data()
      });
    });
    // 直接替换posts数组，彻底避免重复
    setPosts(newPosts);
    // 若仍需维护nextId，可基于文档数量设置（删除场景下需调整逻辑）
    setNextId(newPosts.length);
  });

  // 组件卸载时取消订阅，避免内存泄漏
  return () => unsubscribe();
}, []);

新增消息函数优化 #

const addPost = (e) => {
  e.preventDefault();

  const docData = {
    name: "mo",
    job: "zoo",
    message: input,
    avatarUrl: "https://",
    postDate: firebase.firestore.FieldValue.serverTimestamp(),
    type: "post",
  };

  // 用addDoc自动生成唯一ID，无需手动维护nextId
  addDoc(collection(db, "posts"), docData)
    .then(() => {
      setInput("");
      // 无需手动更新posts，onSnapshot会自动同步数据
    })
    .catch((err) => {
      console.error("添加帖子失败:", err);
    });
};

移除原有的querySnapshot函数 #

不再需要原来的异步querySnapshot函数，onSnapshot已经处理了实时数据同步逻辑。

额外说明 #

• 之前用Set无效的原因：循环中逐个添加数据时依赖的是旧的posts状态，导致去重判断失效，批量替换数组的方式从根源解决了重复问题。
• Strict Mode的双重调用：onSnapshot第一次调用返回初始数据，第二次是Strict Mode的验证调用，但因为我们直接替换数组，不会出现重复追加的情况。

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