Firebase Database用户信息展示错误及跨页登录状态保持问题

一、解决"Cannot read properties of null (reading 'studioName')"报错 #

1. 确保Auth状态就绪后再读取数据库 #

Firebase Auth的currentUser可能在页面初始化时还未加载完成，直接读取会得到null。必须通过onAuthStateChanged监听用户登录状态，确保拿到有效用户后再查询数据库：

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    // 确认用户已登录，再执行数据库查询
    const userRef = firebase.database().ref(`users/${user.uid}`);
    userRef.once('value')
      .then(snapshot => {
        const userData = snapshot.val();
        if (userData) {
          // 正常读取studioName
          console.log(userData.studioName);
        } else {
          console.error("数据库中未找到该用户的数据");
        }
      })
      .catch(err => console.error("读取数据库失败:", err));
  } else {
    console.log("用户未登录");
  }
});

2. 检查数据库安全规则 #

即使用户ID存在，若没有读取权限，数据库会返回null。确保规则允许认证用户访问自己的数据：

{
  "rules": {
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    }
  }
}

可以在Firebase控制台的"数据库"->"规则"页面修改并发布。

3. 验证数据库路径是否正确 #

确认代码中读取的路径和数据库实际结构一致。比如数据库中用户数据存储在users/{uid}下，就不能写成user/{uid}或其他错误路径。

二、确保页面跳转时保持登录状态 #

Firebase Auth默认会将用户会话存储在本地，页面跳转/刷新时自动恢复，但需注意以下几点：

1. 全局监听Auth状态 #

在每个需要用户登录的页面，都通过onAuthStateChanged监听状态，而不是仅在初始化时读取currentUser。这样能确保页面加载完成后，Auth会话恢复时自动触发逻辑：

// 在页面加载时执行
firebase.auth().onAuthStateChanged(user => {
  if (!user) {
    // 用户未登录，跳转到登录页
    window.location.href = '/login.html';
  }
});

2. 避免手动清除Auth会话 #

不要调用firebase.auth().signOut()或手动删除本地存储中Firebase相关的键值对，否则会强制注销用户。

3. 单页应用路由注意事项 #

如果是SPA（如Vue/React），使用前端路由跳转时，Auth状态会自动保持，但仍需在路由守卫中检查Auth状态，确保未登录用户无法访问受保护页面。

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