React TypeScript从Firebase获取登录用户邮箱报错求助

1. 导入并使用 Firebase 官方 User 类型 #

首先从 Firebase Auth 包中导入User类型，明确用户对象的结构：

import { User } from "firebase/auth";

2. 给监听回调的 user 参数指定类型 #

用onAuthStateChanged监听登录状态时，user 的实际类型是User | null（未登录时为null），直接给参数标注类型：

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user: User | null) => {
  if (user) {
    // 此时 TypeScript 知道 user 不为 null，可直接访问 email
    const userEmail = user.email;
    // 执行后续业务逻辑
  } else {
    // 处理用户未登录的场景
  }
});

3. 组件内存储用户状态的正确姿势 #

如果是在 React 函数组件中使用，用useState存储用户时直接指定类型：

import { useState, useEffect } from "react";
import { getAuth, User, onAuthStateChanged } from "firebase/auth";

function UserProfile() {
  // 初始化状态为 null，类型指定为 User | null
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    const auth = getAuth();
    // 订阅 auth 状态变化
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });

    // 组件卸载时取消订阅
    return () => unsubscribe();
  }, []);

  return (
    <div>
      {/* 用可选链或条件渲染处理未登录情况 */}
      {user?.email ? <span>当前邮箱：{user.email}</span> : <span>请登录</span>}
    </div>
  );
}

4. 可选链仍报错的兜底处理 #

如果还是有类型错误，大概率是 TypeScript 没正确识别用户类型，可在确定 user 存在时用类型断言（注意：仅在确保 user 不为 null 时使用）：

const userEmail = (user as User).email;

本质问题是没有给 user 变量指定正确的 TypeScript 类型，Firebase 的用户对象本身是User | null的联合类型，明确类型后，TypeScript 就能正确推断可选链的合法性，不会再抛出错误。

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