AngularFireAuth.authState始终返回null且报不可扩展对象错误

问题分析 #

你在使用AngularFireAuth（@angular/fire/compat/auth）实现路由守卫时，已通过signInWithEmailAndPassword()完成登录（Firebase控制台确认状态正常），但authState始终返回null，且tap无日志输出，控制台抛出Cannot add property 0, object is not extensible错误。该错误源于Firebase Auth的状态监听逻辑中无法向不可扩展数组添加元素，通常和Zone.js补丁缺失、AngularFire与Firebase SDK兼容性或AuthService的authState暴露方式有关。

解决方案 #

1. 添加Zone.js的Firebase补丁 #

在src/polyfills.ts文件中，已有Zone.js导入后添加Firebase补丁，确保Angular能正确追踪Firebase异步操作：

// 现有Zone.js导入语句下方添加
import 'zone.js/plugins/firebase';

2. 确认AuthService中authState的正确暴露 #

检查你的AuthService是否正确从AngularFireAuth中获取并暴露authState：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  authState: Observable<any>;

  constructor(private afAuth: AngularFireAuth) {
    this.authState = this.afAuth.authState;
  }
}

3. 调整路由守卫逻辑 #

替换take(1)为first()避免过早终止订阅，同时完善错误处理：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { first, map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate() {
    return this.authService.authState.pipe(
      first(),
      map(user => {
        if (user) {
          return true;
        }
        this.router.navigate(['/login']);
        return false;
      }),
      catchError(err => {
        console.error('路由守卫验证错误:', err);
        this.router.navigate(['/login']);
        return of(false);
      })
    );
  }
}

4. 验证版本兼容性 #

当前@angular/fire@7.5.0与@angular/core@13.3.12兼容，但可尝试将Firebase SDK版本调整为9.15.0（与@angular/fire7.5.x更匹配的稳定版本），修改package.json后重新安装依赖：

"firebase": "^9.15.0"

5. 调整Angular构建配置（生产环境） #

若生产环境出现问题，在angular.json中添加允许CommonJS依赖的配置：

"architect": {
  "build": {
    "options": {
      "allowedCommonJsDependencies": ["firebase", "@angular/fire"]
    }
  }
}

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