Angular集成Firebase实现Google登录报类型错误怎么办

问题根因 #

两处报错都是Firebase v9+版本API导入规则不匹配、混用新旧API体系导致：

• import { auth } from 'firebase/auth'是Firebase新版模块化API的导入路径，该路径下不存在名为auth的导出成员（提示提到的Auth是TS类型而非可调用的实例/命名空间），且你当前使用@angular/fire/compat兼容层方案，该导入完全多余，直接触发未使用变量、导出成员不存在两个报错。
• import * as firebase from 'firebase/compat'导入路径错误，compat兼容层的命名空间需要从对应子包单独导入，直接从compat根路径导入无法挂载auth属性，直接导致firebase.auth.GoogleAuthProvider识别不到auth属性的报错。

修复方案 #

改动最小的兼容层修复方式（不需要改动现有业务逻辑）：

1. 删除所有注释掉的旧导入语句、错误的多余导入语句
2. 按照compat层规范导入firebase核心包，再通过侧导入的方式挂载auth服务到firebase命名空间
3. 原有登录方法的调用逻辑不需要修改

修复后完整代码 #

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
// 导入compat版本firebase核心命名空间
import firebase from 'firebase/compat/app';
// 侧导入挂载compat版auth服务，不需要单独接收变量
import 'firebase/compat/auth';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent {
  constructor(private afAuth: AngularFireAuth) {}

  login() {
    this.afAuth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  }
}

前置检查项 #

如果改完导入还是报错，确认以下配置：

• 根模块AppModule中已经正确引入AngularFireModule并传入Firebase配置初始化，同时引入了AngularFireAuthModule
• 本地安装的firebase依赖版本和@angular/fire版本大版本一致，避免跨版本导致的类型冲突
• Firebase控制台已经开启Google登录方式，并且配置了合法的授权域名

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