Firebase Database无数据返回：用户账户页面开发故障

用Firebase Auth、Realtime Database和Storage开发用户账户页面时，从Database获取的用户名和头像数据显示为undefined，核心问题出在异步处理和数据库数据读取的逻辑上。

问题根源 #

• onAuthStateChanged使用错误：你把监听函数的返回值（取消监听的函数）直接赋值给了accountData，但这个函数的回调是异步触发的，无法同步获取返回值。
• 未读取数据库数据：只创建了数据库引用ref(database, 'users/' + user.uid)，但没有调用get()方法去实际获取数据。
• 异步代码执行时机错误：initializeData(accountData)在页面加载时立即执行，此时异步数据还没返回，accountData自然是undefined。
• Storage异步方法处理错误：getDownloadURL是异步操作，直接赋值给img.src会导致拿到的是Promise对象，不是实际的URL。

修正后的完整代码 #

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.13.0/firebase-app.js"
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.13.0/firebase-auth.js';
import { getDatabase, set, ref, get } from 'https://www.gstatic.com/firebasejs/9.13.0/firebase-database.js'; // 新增get方法
import { getStorage, ref as storageRef, getDownloadURL } from 'https://www.gstatic.com/firebasejs/9.13.0/firebase-storage.js'

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};

// 初始化Firebase服务
const app = initializeApp(firebaseConfig);
const auth = getAuth(app)
const database = getDatabase(app)
const storage = getStorage(app)
// 获取Storage中的头像文件夹引用（不需要写完整gs://路径，直接写文件夹名即可）
const imageFolder = storageRef(storage, "profile-pictures")

// 监听用户登录状态变化，在回调中处理数据
onAuthStateChanged(auth, async (user) => {
    if (user) {
        // 获取用户数据库引用
        const userRef = ref(database, 'users/' + user.uid)
        // 读取数据库数据
        const snapshot = await get(userRef)
        if (snapshot.exists()) {
            const accountData = snapshot.val()
            // 数据获取成功后初始化页面
            await initializeData(accountData)
        } else {
            console.log("用户数据不存在")
        }
    } else {
        console.log("用户未登录")
    }
})

// 初始化页面数据，用async处理异步的Storage操作
async function initializeData(accountData) {
    // 设置用户名
    const usernameBox = document.getElementById('username')
    usernameBox.textContent = accountData.username // 直接赋值更简单，不需要createTextNode

    // 处理头像
    const profilePicBox = document.getElementById("profile-picture")
    // 构建头像文件引用
    const profilePicRef = storageRef(imageFolder, `${accountData.profilePicture}.png`)
    try {
        // 获取头像下载URL（异步操作）
        const profileLink = await getDownloadURL(profilePicRef)
        // 创建图片元素并设置src
        let img = document.createElement("img");
        img.src = profileLink;
        profilePicBox.appendChild(img);
    } catch (error) {
        console.log("获取头像失败：", error)
    }
}

关键改动说明 #

1. 修正onAuthStateChanged逻辑：把数据读取和页面初始化都放在监听回调里，确保用户登录状态确认后再执行操作。
2. 添加数据库数据读取：用get(userRef)读取数据库数据，通过snapshot.val()拿到实际的用户数据。
3. 异步处理Storage操作：给initializeData加上async，用await处理getDownloadURL，确保拿到实际URL后再设置图片src。
4. 简化Storage引用创建：不需要手动拼接gs://路径，直接用storageRef(imageFolder, 文件名)即可，更安全简洁。
5. 简化用户名设置：用textContent直接赋值，比createTextNode+appendChild更高效。

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