为何在Firebase中移除同名挚爱联系人后，无需刷新就无法重新添加？

嘿，我帮你排查了下代码，问题出在移除联系人的逻辑里残留了持续监听的回调，导致你重新添加同名联系人时刚加上就被删掉了，具体来说：

• 你在removeLovedOne方法里用了on('value')来监听数据变化，这是Firebase的持续监听模式——只要对应节点的数据有变动，这个回调就会触发。当你移除某个同名联系人后，这个监听器并没有被销毁，还挂在那里。
• 等你重新添加同一个名字的联系人时，数据库里的新增操作会触发这个残留的监听器，它会再次执行删除逻辑，把刚添加的联系人立刻删掉，所以你看起来就是加不上，直到页面刷新，旧的监听器被销毁才恢复正常。

另外还有两个小细节需要调整：

1. 监听方式错误：移除操作只需要一次性读取数据找到要删的节点，不需要持续监听，应该用once('value')代替on('value')，这样读取一次数据后就不会再触发回调了。
2. 数据库删除逻辑不彻底：当前的removeLovedOne数据库方法只是删掉了lovedOne字段，而不是整个联系人节点，这会留下空节点，可能导致后续查询出问题。

下面是修复后的代码：

修复后的前端移除方法 #

removeLovedOne(event) {
  const lovedOne = event.target.id;
  const unsubscribeAuth = firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      const ref = firebase.database().ref(`users/${user.uid}/lovedOnes`);
      const removeQuery = ref.orderByChild('lovedOne').equalTo(lovedOne);
      
      // 改用once('value')一次性读取数据，避免持续监听
      removeQuery.once('value', (snapshot) => {
        if (snapshot.exists()) {
          // 遍历所有匹配的节点（如果有多个同名联系人）
          snapshot.forEach(childSnap => {
            const lovedOneId = childSnap.key;
            db.removeLovedOne(user.uid, lovedOneId)
              .then(() => {
                this.refreshLovedOnes();
              })
              .catch(error => {
                this.setState(byPropKey('error', error));
              });
          });
        }
      });
      
      // 完成用户验证后取消auth监听
      unsubscribeAuth();
    } else {
      unsubscribeAuth();
    }
  });
  
  event.preventDefault();
}

修复后的数据库删除方法 #

export const removeLovedOne = (userId, lovedOneKey) => (
  // 移除整个联系人节点，而不是单个字段
  db.ref(`users/${userId}/lovedOnes/${lovedOneKey}`).remove()
);

这样修改后，移除操作会彻底删除对应节点，同时不会留下持续监听的回调，你再添加同名联系人时就不会出现刚加就没的情况了，不用刷新页面也能正常操作。

内容的提问来源于stack exchange，提问作者Ralph David Abernathy