Nuxt3与VueFire中页面调用getCurrentUser获取用户失败问题咨询

目前有很多关于Nuxt3和VueFire搭配useCurrentUser使用的示例，但我仅找到getCurrentUser在中间件中的用法示例，未发现页面中的使用案例。

我编写了一个用于页面权限保护的中间件：

// middleware/auth.ts
export default defineNuxtRouteMiddleware(async (to, from) => {
  const user = await getCurrentUser();

  // 未登录则重定向到登录页
  if (!user) {
    return await navigateTo({
      path: "/",
      query: {
        redirect: to.fullPath,
      },
    });
  }
});

对应的页面文件pages/my-page.vue代码如下：

<script setup lang="ts">
definePageMeta({
    showHeader: true,
    middleware: ["auth"]
});

const _auth = useFirebaseAuth();
const db = useFirestore();
const user = await getCurrentUser();

if (!user) {
    throw new Error("No user?");
}

const idToken = await user.getIdToken();
// 使用token调用API等操作
</script>

既然能进入该页面，说明用户身份已通过中间件验证，但页面却抛出了"No user?"错误，找不到问题原因。

附：将调用替换为const user = useCurrentUser()可以正常工作，但我希望能先等待获取到用户信息后再继续后续流程。

问题原因 #

中间件中的getCurrentUser()能正常获取用户，是因为路由中间件执行时，VueFire的Auth实例已经完成初始化并同步了用户状态。但页面<script setup>的代码执行时机更早，此时Auth实例的状态还未完成同步，即便中间件已经验证过用户，页面里的getCurrentUser()仍会返回null，导致抛出错误。

解决方案 #

想要在页面中等待用户信息加载完成后再执行后续代码，推荐结合VueFire提供的useCurrentUser()和Nuxt的until()工具函数，利用响应式状态等待用户状态就绪：

<script setup lang="ts">
definePageMeta({
    showHeader: true,
    middleware: ["auth"]
});

const _auth = useFirebaseAuth();
const db = useFirestore();
const user = useCurrentUser();

// 等待用户状态加载完成
await until(user).toBeTruthy();

// 此时user.value已存在，可安全调用方法
const idToken = await user.value.getIdToken();
// 使用token调用API等操作
</script>

这种方式既满足了等待用户信息的需求，又能适配Nuxt3和VueFire的生命周期与状态同步机制，避免了状态间隙导致的问题。

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