React中结合Firestore与Realtime Database实现用户在线状态问题求助

问题原因 #

onDisconnect().set() 是Realtime Database提供的服务端预执行操作，你提前告诉RTDB服务端，当客户端连接断开时自动执行指定的写入操作，所以RTDB的状态能正常更新。但你写在.then()回调里的updateFirestoreUser是客户端回调逻辑，关闭浏览器标签页时，JS运行上下文已经被销毁，这部分代码根本没有机会执行，所以Firestore不会更新。

另外你当前代码中所有用户的状态都存在同一个status根节点下，会出现多用户状态互相覆盖的问题，需要先修正存储路径。

解决方案 #

1. 修正客户端RTDB状态存储路径 #

将状态存储路径改为和用户UID绑定，避免多用户冲突：

// 原来的代码
// const myConnectionsRef = rtdbRef(rtdb, `status`);
// 替换为
const myConnectionsRef = rtdbRef(rtdb, `status/${user.uid}`);

同时删除onDisconnect的then回调中更新Firestore的逻辑，仅保留RTDB写入操作：

onDisconnect(myConnectionsRef)
  .set("disconnected")

2. 用Firebase Cloud Functions实现服务端状态同步 #

这是最稳定的方案，不管客户端是否正常关闭都能保证状态同步：
部署以下Cloud Function监听RTDB状态节点的变化，自动同步到Firestore的users集合：

const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();
const db = admin.firestore();

exports.syncUserOnlineStatus = functions.database.ref('/status/{uid}')
  .onUpdate(async (change, context) => {
    const newStatus = change.after.val();
    const uid = context.params.uid;
    const userQuery = await db.collection('users').where('uid', '==', uid).limit(1).get();
    
    if (userQuery.empty) return null;
    const userDoc = userQuery.docs[0];
    
    await userDoc.ref.update({
      online: newStatus === 'connected',
      updatedAt: admin.firestore.FieldValue.serverTimestamp()
    });
    return null;
  });

3. 可选：添加客户端兜底逻辑 #

可以在客户端添加beforeunload事件监听，覆盖大部分用户主动关闭页面的场景：
在useProvideAuth的useEffect中添加以下代码：

useEffect(() => {
  const handleBeforeUnload = () => {
    user && updateFirestoreUser(user, false);
  };
  window.addEventListener('beforeunload', handleBeforeUnload);
  return () => window.removeEventListener('beforeunload', handleBeforeUnload);
}, [user]);

4. 权限配置补充 #

为了防止恶意修改其他用户的在线状态，需要配置Realtime Database的访问规则：

{
  "rules": {
    "status": {
      "$uid": {
        ".read": true,
        ".write": "auth != null && auth.uid == $uid"
      }
    }
  }
}

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