Angular Fire集成FirebaseUI初始化报错：apiKey读取失败求助

在使用 FirebaseUI 与 Angular Fire 结合时，初始化代码如下：

constructor(private afAuth: AngularFireAuth) {
}

ngOnInit(): void {
  const uiConfig = {
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
      signInSuccessWithAuthResult: this.onLoginSuccessful.bind(this)
    }
  }
  this.ui = new firebaseui.auth.AuthUI(this.afAuth);
  this.ui.start("firebase-ui-auth-container", uiConfig);
}

控制台触发错误：TypeError: Cannot read properties of undefined (reading 'apiKey')，错误出现在 this.ui = new firebaseui.auth.AuthUI(this.afAuth); 这一行。已确认 Angular Fire 配置中 apiKey 已定义，Auth 服务运行正常，仅 FirebaseUI 存在该问题。

错误原因 #

FirebaseUI 的 AuthUI 构造函数要求传入原生的 Firebase Auth 实例（即 firebase.auth.Auth 对象），但你传入的是 Angular 封装后的 AngularFireAuth 服务实例，两者不是同一类型，导致 FirebaseUI 无法读取到原生实例上的 apiKey 属性。

修改步骤 #

将 AngularFireAuth 实例替换为原生 Firebase Auth 实例即可，分两种情况适配：

情况1：使用旧版 AngularFire（v6 及以下）

直接从 AngularFireAuth 实例的 auth 属性获取原生 Auth 对象：

constructor(private afAuth: AngularFireAuth) {
}

ngOnInit(): void {
  const uiConfig = {
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
      signInSuccessWithAuthResult: this.onLoginSuccessful.bind(this)
    }
  }
  // 获取原生 Firebase Auth 实例
  const authInstance = this.afAuth.auth;
  this.ui = new firebaseui.auth.AuthUI(authInstance);
  this.ui.start("firebase-ui-auth-container", uiConfig);
}

情况2：使用新版 AngularFire（v7+，模块化 API）

通过 getAuth() 方法直接获取原生 Auth 实例：

import { getAuth } from '@angular/fire/auth';

constructor(private afAuth: AngularFireAuth) {
}

ngOnInit(): void {
  const uiConfig = {
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
      signInSuccessWithAuthResult: this.onLoginSuccessful.bind(this)
    }
  }
  // 获取原生 Firebase Auth 实例
  const authInstance = getAuth();
  this.ui = new firebaseui.auth.AuthUI(authInstance);
  this.ui.start("firebase-ui-auth-container", uiConfig);
}

额外注意事项 #

• 确保已正确安装 firebaseui 和 @angular/fire 依赖，且版本兼容
• 若使用模块化 Firebase SDK，需确认已在 app.module.ts 中正确配置 provideFirebaseApp 和 provideAuth

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