登录跳转后从Firebase获取用户UID并读取Realtime Database用户名

核心问题分析 #

手动硬编码UID能正常读取数据，说明数据库规则和字段路径没问题，问题出在动态获取当前登录用户UID的时机或方式上——Firebase的用户状态是异步返回的，必须确保在用户登录状态确认后再执行数据库读取操作。

修正后的Vanilla JS代码示例 #

// 初始化Firebase（确保已正确配置）
const firebaseConfig = {
  // 你的Firebase配置信息
};
firebase.initializeApp(firebaseConfig);
const db = firebase.database();
const auth = firebase.auth();

// 监听用户登录状态变化，确保在用户登录后获取UID并读取数据
auth.onAuthStateChanged(user => {
  if (user) {
    // 用户已登录，获取当前用户UID
    const currentUid = user.uid;
    // 读取对应节点的ownername字段
    db.ref(`customer_account/${currentUid}/ownername`).once('value')
      .then(snapshot => {
        const ownerName = snapshot.val();
        if (ownerName) {
          // 成功获取后可渲染到页面，比如插入到指定DOM元素
          document.getElementById('owner-name').textContent = ownerName;
        } else {
          console.log('该用户节点下未找到ownername字段');
        }
      })
      .catch(error => {
        console.error('读取数据失败:', error);
      });
  } else {
    // 用户未登录，可跳转到登录页或提示登录
    console.log('用户未登录，请先登录');
    // window.location.href = '/login.html';
  }
});

关键注意事项 #

• 必须使用onAuthStateChanged监听状态：不要直接调用auth.currentUser，因为页面加载时Auth模块可能还未初始化完成，currentUser可能为null。
• 数据库规则权限：确保你的实时数据库规则允许已登录用户读取自己的节点，比如：

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

• 路径拼写检查：确认customer_account/${currentUid}/ownername的路径和数据库结构完全一致，大小写、节点名称不能出错。

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