Firebase V9使用getUser/getAuth时如何将[user]绑定到用户认证状态

Firebase V9的Auth模块初始化是异步流程，直接同步读取getAuth()返回实例上的currentUser属性做判断，会因为模块还没完成和后端的会话校验，拿到错误的null值，导致已登录用户被误拦截。要实现「仅登录后运行业务逻辑、未登录直接拦截」的效果，分两种场景实现：

1. 全局/页面级持续监听登录状态（推荐用于路由守卫、全局状态同步） #

使用官方提供的onAuthStateChanged监听器，该回调会在Auth初始化完成、用户每次登录/登出时自动触发，是最稳定的状态判断方式：

// 引入V9模块化API
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth();

// 注册监听，返回值为取消订阅的方法
const unListen = onAuthStateChanged(auth, (user) => {
  if (user) {
    // 已登录状态：可获取uid、邮箱等用户信息，执行业务逻辑
    // 常用属性：user.uid / user.email / user.displayName
    runYourBusinessCode(user);
  } else {
    // 未登录状态：拦截业务逻辑，可跳转登录页、弹出登录提示
    jumpToLoginPage();
  }
});

// 页面卸载/组件销毁时调用unListen()取消监听，避免内存泄漏

2. 单次场景判断登录状态（适用于按钮点击等单次触发场景） #

如果不需要持续监听状态，只是在某个操作触发时校验登录态，可以用authStateReady()方法等待Auth初始化完成后，再读取currentUser判断：

import { getAuth } from "firebase/auth";
const auth = getAuth();

async function handleClickAction() {
  // 等待Auth完成会话校验
  await auth.authStateReady();
  const user = auth.currentUser;
  if (!user) {
    // 未登录，拦截操作
    alert("请先登录再操作");
    return;
  }
  // 已登录，执行对应操作
  submitFormData(user);
}

常见避坑点 #

• 禁止在页面初始化阶段直接读取auth.currentUser做拦截，此时Auth还未完成后端校验，返回的null不代表真实未登录状态，会出现已登录用户被误跳转到登录页的问题
• onAuthStateChanged第一次触发回调才代表Auth状态初始化完成，初始化过程中的加载态可以单独做loading展示，不要提前做逻辑判断
• 多页面/组件使用登录态时，建议把user状态统一存在全局状态管理中，所有鉴权逻辑从统一状态取值，避免重复监听带来的状态不一致问题

Firebase V9 认证状态实现示例参考

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