Firebase v9当前登录用户返回null问题求助

你的核心问题在于重复初始化Firebase实例以及未使用全局单例的Auth服务，导致直接访问页面时无法读取已保存的用户会话。以下是具体修复步骤：

1. 修正Firebase初始化方式（全局仅初始化一次） #

不要在组件的ngOnInit里重复调用initializeApp，Firebase不允许重复初始化同一个应用实例，这会导致Auth状态无法跨组件共享。

在Angular的AppModule中全局初始化Firebase：

// app.module.ts
import { NgModule } from '@angular/core';
import { initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { environment } from '../environments/environment';

// 全局仅初始化一次Firebase App
initializeApp(environment.firebaseConfig);

@NgModule({
  providers: [
    // 提供全局单例的Auth服务
    provideAuth(() => getAuth()),
  ]
})
export class AppModule { }

2. 组件中通过依赖注入使用Auth单例 #

在个人资料组件中，注入全局Auth实例，而非每次创建新的Auth对象：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Auth, User, onAuthStateChanged } from '@angular/fire/auth';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit, OnDestroy {
  currentUser: User | null = null;
  private authUnsubscribe?: () => void;

  constructor(private auth: Auth) { }

  ngOnInit(): void {
    // 注册一次Auth状态监听，Firebase会自动从本地存储恢复会话
    this.authUnsubscribe = onAuthStateChanged(this.auth, (user) => {
      this.currentUser = user;
      if (user) {
        console.log('当前用户:', user);
        console.log('用户UID:', user.uid);
      } else {
        console.log('无登录用户');
        // 可选：跳转到登录页
        // this.router.navigate(['/login']);
      }
    });
  }

  // 组件销毁时取消监听，避免内存泄漏
  ngOnDestroy(): void {
    this.authUnsubscribe?.();
  }
}

关键原因说明 #

• 重复初始化App：每次组件加载都创建新的Firebase App实例，导致该实例无法读取之前登录会话（会话存储在默认App的Auth中）。
• Auth单例必要性：Angular中通过依赖注入提供的Auth单例，确保整个应用共享同一个Auth状态，直接访问页面时能正确读取本地保存的用户会话。
• 异步状态监听：onAuthStateChanged是异步触发的，会等待Firebase完成会话恢复后返回用户信息，避免同步获取currentUser时因会话未加载完成返回null的问题。

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