Angular Firebase SSR中用户ID为空且localStorage不可用问题

问题现象 #

运行ng serve时终端抛出以下错误：

User ID is null. Cannot load profile image.
localStorage is not available

该错误直接导致用户头像更新失败，核心问题指向auth.service.ts中的getUserId方法。

相关代码片段 #

dashboard.component.ts：

ngOnInit() {
  const userId = this.authService.getUserId();
  if (userId) {
    this.loadProfileImage(userId);
  } else {
    console.error('User ID is null. Cannot load profile image.');
  }
}

auth.service.ts：

getUserId(): string | null {
  const user = this.firebaseAuth.currentUser;
  return user ? user.uid : null;
}

问题根源 #

1. currentUser的异步特性：Firebase Auth的currentUser是同步属性，但用户认证状态可能还未完成初始化就被调用，导致获取到null，触发头像加载失败的错误。
2. localStorage不可用：该错误多出现于SSR场景、浏览器隐私模式等环境，Firebase Auth默认依赖localStorage存储认证信息，当它不可用时，用户状态无法持久化，也会导致currentUser返回null。

修复方案 #

方案1：改用异步方式获取用户ID #

利用Firebase Auth的authState Observable监听用户状态，确保在认证完成后再获取用户ID：

修改auth.service.ts：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// ...

getUserId(): Observable<string | null> {
  return this.firebaseAuth.authState.pipe(
    map(user => user ? user.uid : null)
  );
}

修改dashboard.component.ts：

ngOnInit() {
  this.authService.getUserId().subscribe(userId => {
    if (userId) {
      this.loadProfileImage(userId);
    } else {
      console.error('User ID is null. Cannot load profile image.');
    }
  });
}

方案2：处理localStorage不可用场景 #

如果是SSR环境，配置Firebase Auth使用内存存储替代localStorage：

import { initializeApp } from "firebase/app";
import { getAuth, setPersistence, inMemoryPersistence } from "firebase/auth";

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// 设置内存持久化
setPersistence(auth, inMemoryPersistence)
  .then(() => {
    // 执行后续认证逻辑
  })
  .catch((error) => {
    console.error('设置持久化失败:', error);
  });

如果是浏览器隐私模式导致的localStorage受限，可添加兜底逻辑，提示用户切换模式或使用默认临时头像。

内容的提问来源于stack exchange，提问作者Mohamed Seif Ben Salah