Firestore onSnapshot更新文档时重复渲染未删除旧文档问题求解

根因分析 #

• items数组定义在onSnapshot回调外层，仅会在useEffect首次执行时初始化一次，后续每次Firestore快照触发更新时，都会往同一个数组里追加新数据，导致数据重复。
• 每次渲染时直接使用innerHTML +=往节点累加内容，没有清空旧DOM，导致原有内容一直保留，新内容重复追加。
• 没有添加快照监听的卸载逻辑，组件销毁后会存在内存泄漏风险。

快速修复版本（适配你现有写法） #

直接调整变量作用域和DOM写入逻辑即可解决重复渲染问题：

const ref = firebase.firestore().collection("messages")

useEffect(() => {
  // 开启快照监听，拿到取消监听的方法
  const unSubscribe = ref.onSnapshot((querySnapshot) => {
    // 每次快照触发都重新初始化数组，清空旧数据
    const items = [];
    querySnapshot.forEach((doc) => {
      items.push(doc.data());
    });
    const postContainer = document.getElementById("postDisplay");
    // 先清空原有DOM内容，再插入新内容
    postContainer.innerHTML = '';
    items.forEach((item) => {
      console.log(item);
      postContainer.innerHTML += `
      <div class="post">
      <h1>${item.title}</h1>
      <p>${item.desc}</p>
      </div>
      `
    })
  });
  // 组件卸载时取消监听，避免内存泄漏
  return () => unSubscribe();
}, [])

React规范写法推荐 #

React场景下不推荐直接操作原生DOM，建议用状态管理数据，由React自动处理渲染逻辑，写法更易维护：

import { useState, useEffect } from 'react';
const ref = firebase.firestore().collection("messages")

function MessageList() {
  // 用state存储消息列表
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const unSubscribe = ref.onSnapshot((querySnapshot) => {
      // 遍历快照拿到最新全量数据，直接更新状态
      const items = querySnapshot.docs.map(doc => doc.data());
      setMessages(items);
    });
    return () => unSubscribe();
  }, []);

  // 用JSX渲染列表，自动同步状态变化
  return (
    <div id="postDisplay">
      {messages.map((item, index) => (
        // 若每条消息有唯一id，建议替换index为item.id，避免渲染异常
        <div key={index} className="post">
          <h1>{item.title}</h1>
          <p>{item.desc}</p>
        </div>
      ))}
    </div>
  )
}

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