Firebase实时数据库用户信息展示异常：字段显示undefined

你遇到的undefined问题核心原因是：Firebase Auth的user对象只存储认证核心数据（如email、uid），你自定义的schoolID、username、last_login这些字段存在实时数据库中，不能直接从Auth的user对象读取。

解决步骤 #

1. 修正Firebase实时数据库初始化 #

你当前代码初始化的是Firestore（云Firestore数据库），但你使用的是实时数据库，需要替换为实时数据库的初始化代码：

// 初始化Firebase实时数据库
const db = getDatabase(app);

2. 通过用户UID从实时数据库读取自定义数据 #

当Auth状态变更时，先获取当前用户的uid，再用这个uid作为路径去实时数据库拉取对应的用户信息：

修改后的完整JS代码：

// Initialize Firebase
const app = initializeApp(firebaseConfig);
// 初始化实时数据库（替换原来的Firestore初始化）
const db = getDatabase(app); 
const auth = getAuth();
// 注意：你的HTML里没有displayName元素，要么在HTML里添加，要么注释掉下面这行
// const displayName = document.getElementById('displayName');
const displayID = document.getElementById('displayID');
const displayEmail = document.getElementById('displayEmail');
const displayUsername = document.getElementById('displayUsername');
const displayLogin = document.getElementById('displayLogin');

auth.onAuthStateChanged(user => {
  if (user) {
    // 用户已登录，获取用户UID
    const uid = user.uid;
    // 从实时数据库读取用户数据，假设你的数据路径是users/{uid}
    const userRef = ref(db, `users/${uid}`);
    get(userRef).then((snapshot) => {
      if (snapshot.exists()) {
        const userData = snapshot.val();
        // 更新DOM内容
        // displayName.innerText = "Currently logged in as: " + user.email;
        displayID.innerText = "School ID: " + userData.schoolID;
        displayEmail.innerText = "Email: " + user.email;
        displayUsername.innerText = "Username: " + userData.username;
        displayLogin.innerText = "Account Creation: " + userData.last_login;
      } else {
        console.log("用户数据不存在");
      }
    }).catch((error) => {
      console.error("读取数据失败:", error);
    });
  } else {
    // 用户未登录，处理逻辑（比如跳转到登录页）
    console.log("用户未登录");
  }
})

3. 调整HTML（可选） #

如果需要保留displayName的显示，在卡片的合适位置添加对应的元素，比如在card-body里加：

<p class="card-text" id="displayName"></p>

关键注意点 #

• 确保实时数据库的安全规则允许已登录用户读取自己的数据，比如：

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

• 确认你的实时数据库路径和代码中ref(db, 'users/${uid}')一致，比如如果你的数据是存在userData/{uid}下，就要对应修改路径。

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