React中onSnapshot为何会重复生成我的记录？

你的问题出在onSnapshot的回调逻辑上：每次集合数据变化（新增、修改、删除文档），onSnapshot都会返回当前集合的完整快照，而你现在的代码是把快照里的每一条文档都追加到之前的rows数组中，相当于每次更新都把所有现有数据再重复加一遍，自然会出现重复项。

修复代码 #

把回调里的逻辑改成直接基于快照构建新的数组，替换掉旧的rows，而不是累加：

const [rows, setRows] = useState([]);

useEffect(() => {
    const ref = collection(firebaseDB, 'my-collection');
    const unsubscribe = onSnapshot(ref, (querySnapshot) => {
        // 每次快照触发时，重新构建完整的rows数组
        const newRows = querySnapshot.docs.map(doc => ({
            id: doc.id, // 建议加上文档ID，作为MUI表格的唯一标识
            ...doc.data()
        }));
        setRows(newRows);
    });
  
    return () => unsubscribe();
}, []);

补充说明 #

• 加上doc.id是因为MUI表格的行需要唯一的id属性（可通过rowId配置指定），避免表格渲染时出现警告或异常。
• onSnapshot的回调会在组件挂载时执行一次（获取初始数据），之后每次集合数据变化都会触发，所以每次用新的快照数据覆盖旧数组，就能保证数据始终和Firestore同步且无重复。

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