Angular应用中Firebase auth/argument-error错误的排查与解决

核心原因 #

你遇到的auth/argument-error是因为混用了Firebase模块化SDK的GoogleAuthProvider和AngularFire兼容层（Compat）API。AngularFire的@angular/fire/compat/auth依赖的是Firebase旧版命名空间SDK，而你从firebase/auth导入的GoogleAuthProvider属于新版模块化SDK，两者类型不兼容，导致参数校验失败。

解决方法 #

方案一：继续使用AngularFire Compat（兼容层） #

1. 替换Provider导入：将firebase/auth的GoogleAuthProvider替换为AngularFire兼容层的版本：

// 替换原导入
// import * as auth from 'firebase/auth';
import { GoogleAuthProvider } from '@angular/fire/compat/auth';

2. 修正GoogleAuth方法：

GoogleAuth() {
  const provider = new GoogleAuthProvider();
  return this.AuthLogin(provider);
}

3. 修复userData赋值错误：你的AuthLogin方法里this.userData(result.user)是错误的，userData是类变量而非函数，应该改为：

.then((result) => {
  this.ngZone.run(() => {
    this.router.navigate(['home']);
  });
  this.userData = result.user; // 修正此处
})

方案二：升级到AngularFire模块化SDK（推荐） #

Compat是过渡方案，推荐使用AngularFire v7+的模块化API：

1. 安装最新依赖（如果版本较低）：

npm install @angular/fire firebase

2. 修改认证服务代码：

import { Injectable, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { Auth, GoogleAuthProvider, signInWithPopup, user } from '@angular/fire/auth';
import { Firestore, doc, setDoc } from '@angular/fire/firestore';

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  userData$ = user(this.auth);

  constructor(
    private auth: Auth,
    private firestore: Firestore,
    private router: Router,
    private ngZone: NgZone
  ) {
    this.userData$.subscribe(user => {
      if (user) {
        localStorage.setItem('user', JSON.stringify(user));
      } else {
        localStorage.setItem('user', JSON.stringify(null));
      }
    });
  }

  GoogleAuth() {
    return signInWithPopup(this.auth, new GoogleAuthProvider())
      .then(result => {
        this.ngZone.run(() => this.router.navigate(['home']));
        // 如果需要同步用户数据到Firestore
        return setDoc(doc(this.firestore, 'users', result.user.uid), {
          uid: result.user.uid,
          email: result.user.email,
          displayName: result.user.displayName
        });
      })
      .catch(error => {
        console.error('登录错误:', error.code, error.message);
        window.alert(error.message);
      });
  }
}

3. 修改AppModule配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { RouteReuseStrategy } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent, DatesViewComponent, LoginComponent, RegisterComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore())
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent]
})
export class AppModule {}

额外检查项 #

• 确认Firebase控制台已启用Google登录（Authentication > Sign-in method > Google）。
• 检查environment.ts中的Firebase配置信息是否完全正确，特别是authDomain。

内容的提问来源于stack exchange，提问作者Camilo Almendares