Nuxt 3.9.3中间件中Firebase Auth的currentUser值不一致问题求助

我是Nuxt 3新手，正在开发集成Firebase Auth的Nuxt项目，按教程操作都正常，但实现路由守卫（通过插件中间件做鉴权）时遇到问题：明明currentUser应该存在，但直接打印$auth.currentUser返回null，打印$auth对象时却能看到currentUser有值。

当前使用Nuxt版本：3.9.3

中间件代码 #

export default defineNuxtPlugin(() => {
    addRouteMiddleware('global-test', () => {

    }, { global: true })

    addRouteMiddleware('auth', async() => {

        const { $auth } = useNuxtApp()

        console.log("call auth middle 1", $auth);

        console.log('call auth middle 2', $auth.currentUser);
    })
})

控制台现象 #

• 打印$auth对象时，控制台展开后能看到currentUser字段存在且有值
• 直接打印$auth.currentUser时输出null

问题原因及解决方案 #

这是Firebase Auth的典型异步初始化问题：当你的中间件执行时，Firebase Auth实例还没完成用户状态的加载，此时$auth.currentUser是初始的null；而浏览器控制台打印对象时会动态读取最新值，所以展开对象能看到已加载的currentUser，造成了看似矛盾的现象。

解决方法1：用onAuthStateChanged监听状态 #

这是Firebase官方推荐的处理用户状态的方式，确保在状态就绪后再执行鉴权逻辑：

addRouteMiddleware('auth', () => {
    const { $auth } = useNuxtApp()
    
    return new Promise((resolve, reject) => {
        // 监听用户状态变化
        const unsubscribe = $auth.onAuthStateChanged(user => {
            unsubscribe() // 取消监听，避免内存泄漏
            if (!user) {
                // 未登录则跳转到登录页
                return navigateTo('/login')
            }
            resolve() // 鉴权通过，继续路由
        }, error => {
            reject(error)
            navigateTo('/login')
        })
    })
})

解决方法2：等待Auth初始化完成 #

如果需要同步风格的代码，可以封装一个等待Auth就绪的逻辑：

addRouteMiddleware('auth', async() => {
    const { $auth } = useNuxtApp()

    // 等待Auth状态初始化完成
    await new Promise(resolve => {
        // 如果currentUser已存在，直接resolve
        if ($auth.currentUser) return resolve()
        // 否则监听状态变化，就绪后resolve
        const unsubscribe = $auth.onAuthStateChanged(() => {
            unsubscribe()
            resolve()
        })
    })

    // 检查用户是否登录
    if (!$auth.currentUser) {
        navigateTo('/login')
    }
})

注意事项 #

• 不要在同步代码中直接依赖$auth.currentUser，必须等待Auth初始化完成
• 可以封装一个自定义Composable（比如useAuthUser）来统一处理用户状态逻辑，在中间件和组件中复用，避免重复代码

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