React使用Firebase Realtime Database添加好友出现非预期多添加异常

算力阿峰

2026-8-28

问题根因

你遇到的数据错乱问题全部来自代码逻辑错误，和Firebase本身机制无关：

错误使用持久监听API：你在提交函数里调用的ref.on('value')是常驻监听器，不是单次拉取数据的方法。每次点击提交都会给整个Users节点绑定一个新的永久监听，且从未解绑，只要Users下任何数据变动（新建账号、任何用户加删好友），所有历史绑定的监听器都会触发，用绑定时留存的闭包变量（旧的输入值、旧的登录用户状态）执行写入逻辑，直接导致跨账号数据乱写入，这就是新账号莫名同步旧好友列表的核心原因。
全节点遍历未做层级过滤：你拉取整个Users根节点的快照后直接forEach遍历，会把所有用户下的friends子节点里存储的好友条目也当成顶层用户记录遍历——这些好友条目本身就带email字段，当你添加一个已有好友的用户时，遍历到对方friends下的所有好友记录，会被误判为匹配的用户，全部写入当前账号的好友列表。
路径存在拼写错误：写入好友的路径里${data.val().uId}}多写了一个闭合花括号，会导致数据写到异常节点下，进一步加剧数据错乱。
状态更新时序错误：点击提交后立刻执行setText("")清空输入框，等监听器异步触发时，拿到的text状态已经是空值，容易出现空匹配、误写入。
额外安全问题：你把用户的password字段明文存储、且全节点拉取所有用户的敏感数据，存在严重的数据泄露风险。

修复方案

替换数据获取方式：把on('value')换成单次取值的once('value')，不要绑定常驻监听器；最优方案是不要全量拉取所有用户数据，直接用Firebase的查询能力匹配目标邮箱，减少不必要的数据拉取，也避免遍历到子节点数据。
修正路径拼写错误，去掉多余的花括号。
写入好友数据时剔除敏感的password字段，只存必要的公开信息（邮箱、用户名、uId）。
调整状态更新时序，确认好友写入成功后再清空输入框。
（可选）好友关系建议做双向写入，添加好友时同时给对方的好友列表写入当前用户的信息，符合常规社交产品逻辑。

修复后参考代码

import React, {useState} from 'react'
import {db, auth} from '../config/fire'
import Message from './Message';

function AddFriend() {
  
  const [text, setText] = useState("");
  const handleText = (e) => {
      setText(e.target.value.trim());
  }

  async function handleSubmit(e)  {
      e.preventDefault();
      const currentUser = auth.currentUser;
      if (!currentUser || !text) return;
      // 阻止用户添加自己
      if (text === currentUser.email) {
        alert('不能添加自己为好友');
        return;
      }

      try {
        // 直接按email查询匹配用户，不用拉取全量数据
        const userSnap = await db.ref('Users')
          .orderByChild('email')
          .equalTo(text)
          .once('value');
        
        if (!userSnap.exists()) {
          alert('未找到对应用户');
          return;
        }

        // 拿到匹配的用户数据，查询结果只会返回匹配的顶层用户节点，不会遍历到子节点
        let targetUser = null;
        let targetUid = null;
        userSnap.forEach((child) => {
          if (child.val().email !== currentUser.email) {
            targetUser = child.val();
            targetUid = child.key;
          }
        })

        if (!targetUser) {
          alert('不能添加自己为好友');
          return;
        }

        // 写入当前用户的好友列表，修正多余的花括号，剔除password字段
        await db.ref(`Users/${currentUser.uid}/friends/${targetUid}`).set({
          email: targetUser.email,
          name: targetUser.name,
          uId: targetUid
        });

        // 可选：双向好友关系，同步给对方好友列表写入当前用户信息
        // await db.ref(`Users/${targetUid}/friends/${currentUser.uid}`).set({
        //   email: currentUser.email,
        //   name: currentUser.displayName || currentUser.email,
        //   uId: currentUser.uid
        // });

        // 写入成功后再清空输入框
        setText("");
        alert('好友添加成功');
      } catch (err) {
        console.error('添加好友失败:', err);
        alert('添加好友失败，请重试');
      }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" value={text} onChange={handleText} placeholder="输入好友邮箱" />
      <button type="submit">添加好友</button>
    </form>
  )
}

export default AddFriend;

注意：你需要去Firebase控制台给Users节点配置索引规则，给email字段加索引，否则按email查询会抛警告，性能也差，规则示例：
{
  "rules": {
    "Users": {
      ".indexOn": ["email"],
      "$uid": {
        // 建议同时配置权限规则，禁止用户修改其他人的资料，只允许用户读写自己的好友列表
        ".write": "auth.uid === $uid",
        ".read": "auth.uid != null"
      }
    }
  }
}

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