基于Firebase的个人资料页面无法显示用户名问题求助

你当前代码存在两个核心问题导致用户名无法展示：

• 混用了Firebase v9模块化API和v8命名空间写法（比如firebase.auth()），会引发API调用异常
• 代码仅处理了用户邮箱的渲染，完全没有获取、展示用户名的逻辑，且Firebase Auth的用户对象默认没有username字段，需根据你存储用户名的位置（Auth的displayName或实时数据库）针对性处理

第一步：统一使用Firebase v9模块化API #

你导入的是v9的模块化包，必须用导入的方法初始化实例，不能再用v8的firebase.auth()这类写法。

第二步：根据用户名存储位置处理展示逻辑 #

情况1：用户名存在Firebase Auth的displayName中 #

如果注册时你已经通过updateProfile把用户名存入Auth的displayName字段，修改代码如下：

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-app.js";
import { getStorage, ref, uploadBytes, getDownloadURL } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-storage.js";
import { getDatabase } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-database.js";
import { getAuth, signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-auth.js";

const firebaseConfig = {
    apiKey: "AIzaSyBiydb9tqJp526GBYwTqv3S7P_ErmOntLg",
    authDomain: "mom-login-a6e00.firebaseapp.com",
    databaseURL: "https://mom-login-a6e00-default-rtdb.firebaseio.com",
    projectId: "mom-login-a6e00",
    storageBucket: "mom-login-a6e00.appspot.com",
    messagingSenderId: "14987956774",
    appId: "1:14987956774:web:f55080976493fa99a20ce7"
};

// 初始化Firebase实例
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getDatabase(app);

// 登出按钮逻辑
const logoutBtn = document.getElementById("logoutBtn");
logoutBtn.addEventListener("click", async () => {
    try {
        await signOut(auth);
        window.location.href = "login.html";
    } catch (error) {
        console.error(error);
    }
});

// 监听用户登录状态
onAuthStateChanged(auth, (user) => {
    if (user) {
        // 展示邮箱
        const emailSpan = document.getElementById("email");
        emailSpan.textContent = user.email;
        
        // 展示用户名（从Auth的displayName读取）
        const usernameSpan = document.getElementById("username");
        usernameSpan.textContent = user.displayName || "未设置用户名";
    } else {
        window.location.href = "login.html";
    }
});

情况2：用户名存在Firebase实时数据库中 #

如果注册时你把用户名存入实时数据库（比如路径为users/{userId}/username），需添加数据库读取逻辑：

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-app.js";
import { getStorage, ref, uploadBytes, getDownloadURL } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-storage.js";
import { getDatabase, ref as dbRef, get } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-database.js";
import { getAuth, signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-auth.js";

const firebaseConfig = {
    apiKey: "AIzaSyBiydb9tqJp526GBYwTqv3S7P_ErmOntLg",
    authDomain: "mom-login-a6e00.firebaseapp.com",
    databaseURL: "https://mom-login-a6e00-default-rtdb.firebaseio.com",
    projectId: "mom-login-a6e00",
    storageBucket: "mom-login-a6e00.appspot.com",
    messagingSenderId: "14987956774",
    appId: "1:14987956774:web:f55080976493fa99a20ce7"
};

// 初始化Firebase实例
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getDatabase(app);

// 登出按钮逻辑
const logoutBtn = document.getElementById("logoutBtn");
logoutBtn.addEventListener("click", async () => {
    try {
        await signOut(auth);
        window.location.href = "login.html";
    } catch (error) {
        console.error(error);
    }
});

// 监听用户登录状态
onAuthStateChanged(auth, async (user) => {
    if (user) {
        // 展示邮箱
        const emailSpan = document.getElementById("email");
        emailSpan.textContent = user.email;
        
        // 从数据库读取用户名
        const userRef = dbRef(db, `users/${user.uid}`);
        try {
            const snapshot = await get(userRef);
            if (snapshot.exists()) {
                const userData = snapshot.val();
                const usernameSpan = document.getElementById("username");
                usernameSpan.textContent = userData.username;
            } else {
                console.log("未找到用户数据");
            }
        } catch (error) {
            console.error(error);
        }
    } else {
        window.location.href = "login.html";
    }
});

额外检查项 #

1. 确保HTML中存在用于展示用户名的元素，比如：<span id="username"></span>
2. 如果使用Auth的displayName，需确认注册时已调用updateProfile设置该字段，示例注册代码片段：

   import { updateProfile } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-auth.js";
   
   // 注册成功后执行
   await updateProfile(user, {
     displayName: 你的用户名变量
   });
   

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