页面加载时firebase.auth().currentUser为null 如何用async/await等待其加载完成

你遇到的问题本质是Firebase Auth初始化阶段currentUser默认值为null，只有初始化完成后才会同步真实的认证状态，currentUser本身不是可等待对象，直接使用await拿到的必然是初始的null值。只需要把观察者逻辑封装成Promise，即可实现await等待初始化完成的效果。

封装代码实现 #

// 全局复用的等待currentUser初始化工具函数
function getCurrentUser(auth) {
  return new Promise((resolve, reject) => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      unsubscribe(); // 拿到结果后立即取消订阅，避免内存泄漏
      resolve(user); // 返回最终状态：未登录返回null，已登录返回完整的用户对象
    }, reject);
  });
}

个人资料页调用示例 #

async function loadUserProfile() {
  const auth = getAuth(); // 替换为你项目中的Firebase Auth实例
  const currentUser = await getCurrentUser(auth);
  
  if (!currentUser) {
    // 未登录状态处理逻辑，比如跳转回登录页
    return;
  }

  // 正常拿到uid后拉取Firestore的用户专属数据
  const userDoc = await getDoc(doc(db, "users", currentUser.uid));
  if (userDoc.exists()) {
    const userProfile = userDoc.data();
    // 后续执行页面渲染逻辑
  }
}

方案优势 #

• 完全贴合Firebase Auth的状态更新逻辑，不会拿到初始化阶段的临时null值
• 不需要依赖localStorage做数据中转，规避本地存储被篡改的安全风险
• 初始化完成就自动取消订阅，不会产生冗余监听器，无内存泄漏问题
• 同时兼容已登录、未登录两种状态，可灵活扩展后续分支逻辑

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