Nuxt与Firebase Auth集成时嵌套JavaScript async/await未触发问题

存在的问题 #

• onAuthStateChanged 本身返回的是取消监听的函数，不是Promise，代码中写的await无实际效果，中间件不会等待回调内的异步逻辑执行完成就会提前终止
• 声明了getDocData异步函数但未主动触发执行，自然不会运行
• 代码存在笔误：doc.data() 应为 docSnap.data()，否则无法正常读取快照内的文档数据

修复后代码 #

import { onAuthStateChanged } from 'firebase/auth';
import { getDoc, doc } from 'firebase/firestore';
import { auth, db } from '~/plugins/firebase';

export default async function ({ redirect }) {
  // 将onAuthStateChanged包装为Promise，适配Nuxt3中间件异步等待逻辑
  const user = await new Promise((resolve) => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      unsubscribe() // 拿到身份状态后立即取消监听，避免内存泄漏
      resolve(currentUser)
    })
  })

  if (user) {
    const documentRef = doc(db, 'users', user.uid)
    const docSnap = await getDoc(documentRef)
    if (docSnap.exists()) {
      console.log('Document data:', docSnap.data())
      // 此处可追加自定义业务逻辑，如将用户数据存入全局状态
    } else {
      // 无对应用户文档的处理逻辑示例
      return redirect('/profile/init')
    }
  } else {
    // 未登录场景的处理逻辑示例
    return redirect('/login')
  }
}

方案优势 #

• 逻辑扁平化，无多余嵌套的异步函数声明，可读性和可维护性更高
• 正确等待身份校验+文档读取全流程异步操作，符合Nuxt3中间件的执行规则
• 主动取消身份状态监听，避免内存泄漏问题

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