React中如何获取Firebase已登录用户的元数据？

你的核心错误有两个：

1. 错误使用UserMetadata：UserMetadata是TypeScript的类型定义（仅用于类型校验），在JavaScript环境下完全不需要导入，更不能直接当作构造函数调用UserMetadata()来创建实例——这就是你报错的根源。
2. 没有获取已登录的用户对象：用户元数据是绑定在已认证的用户实例上的，必须先拿到当前登录的Firebase用户，才能从中提取元数据。

正确实现步骤 #

以React环境为例，你需要：

• 从firebase/auth导入getAuth和useAuthState（用于监听用户登录状态）
• 获取当前登录用户的metadata属性，它本身就包含creationTime（账户创建时间）和lastSignInTime（上次登录时间）
• 把ISO格式的日期字符串转换成可读性强的格式

完整示例代码 #

import { getAuth, useAuthState } from "firebase/auth";
// 可选：用date-fns简化日期格式化，也可以用原生Date API替代
import { format } from "date-fns";

const Account = () => {
  const auth = getAuth();
  const [user] = useAuthState(auth);

  // 处理日期格式化
  const formatDate = (dateString) => {
    if (!dateString) return "N/A";
    // 原生API写法：new Date(dateString).toLocaleDateString('zh-CN')
    // date-fns写法更灵活可控：
    return format(new Date(dateString), "yyyy年MM月dd日 HH:mm");
  };

  if (!user) {
    return <div>请先登录</div>;
  }

  const { creationTime, lastSignInTime } = user.metadata;

  return (
    <div>
      <div className="membership_start_date account_overview_card">
        <h2 className='account_overview_card_title'>Member since</h2>
        <p className='account_overview_card_detail'>{formatDate(creationTime)}</p>
      </div>
      <div className="last_login_date account_overview_card">
        <h2 className='account_overview_card_title'>Last Login</h2>
        <p className='account_overview_card_detail'>{formatDate(lastSignInTime)}</p>
      </div>
    </div>
  );
};

export default Account;

关键说明 #

• useAuthState是React专属钩子，会自动监听用户登录状态变化，确保拿到最新的用户实例。非React环境可直接用getAuth().currentUser，但要注意处理用户未登录的空值情况。
• user.metadata是Firebase自动为已登录用户生成的对象，无需手动创建，直接访问creationTime和lastSignInTime即可获取对应时间字符串。
• 日期格式化可根据需求选择原生Date API或第三方库，原生写法无需额外依赖，第三方库则能提供更统一的跨浏览器格式支持。

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