Firebase实时数据库OnChildAdded添加子节点时触发两次问题

核心问题分析 #

你遇到的重复添加问题，大概率是两个原因叠加导致：

1. React开发环境下的**Strict Mode（严格模式）**会双重执行useEffect，导致onChildAdded监听器被绑定两次，同一个子节点触发两次回调
2. 没有基于Firebase节点的唯一key做去重判断，即使监听器正常，也可能因为重复触发导致重复添加

解决方案 #

1. 清理Firebase监听器（避免重复绑定） #

onChildAdded方法会返回一个取消订阅的函数，必须在useEffect的返回值中调用它，确保组件卸载或重渲染时清理旧的监听器：

useEffect(() => {
  // 订阅onChildAdded，并获取取消订阅函数
  const unsubscribe = onChildAdded(userRef, (data) => {
    // 把节点的唯一key也加入item，方便后续去重
    const newItem = { ...data.exportVal(), id: data.key };
    addToList(newItem);
  });

  // 组件卸载时取消订阅
  return () => unsubscribe();
}, []);

2. 基于唯一key实现去重添加 #

修改addToList方法，检查列表中是否已有相同id（即Firebase节点的key）的项，只有不存在时才添加：

const addToList = (newItem) => {
  setList((prevList) => {
    // 检查是否已存在相同id的项
    const isDuplicate = prevList.some(item => item.id === newItem.id);
    if (!isDuplicate) {
      return [...prevList, newItem];
    }
    // 如果是重复项，直接返回原列表
    return prevList;
  });
};

3. 可选：关闭React Strict Mode（开发环境临时验证） #

如果是开发环境下Strict Mode导致的双重触发，可以临时在index.js中去掉<React.StrictMode>标签验证，但不建议长期关闭，因为Strict Mode能帮你提前发现很多潜在问题。

为什么之前的尝试无效？ #

• 你之前判断数据与前一次是否不同，但若两次触发的是同一节点的数据，内容完全一致，这种判断就会失效；而基于Firebase节点的唯一key判断，才是最可靠的去重方式
• 未清理监听器会导致同一个事件被多次监听，即使做了去重，也会触发多余的回调，浪费性能

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