Angular 15 集成 Firebase 9.1 遇类型不匹配FirebaseError求助

核心原因 #

这个错误基本是AngularFire与Firebase SDK版本不兼容导致的，AngularFire对Firebase SDK有严格的版本匹配要求，你当前Angular 15.2搭配Firebase 9.1的版本组合存在版本错位问题。

具体解决步骤 #

1. 统一AngularFire与Firebase版本 #

Angular 15对应的AngularFire版本应为7.5.x，且Firebase SDK需升级到9.22.x及以上（9.1版本过低）。执行以下命令更新依赖：

npm uninstall firebase @angular/fire
npm install firebase@^9.22.0 @angular/fire@^7.5.0

2. 规范AppModule中的Firebase配置 #

确保使用AngularFire v7+的模块化导入语法，示例配置如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

import { AppComponent } from './app.component';

const firebaseConfig = {
  // 你的Firebase项目配置信息
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideFirestore(() => getFirestore())
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 修正组件中Firestore的调用逻辑 #

优先使用AngularFire封装的服务，而非直接调用Firebase原生SDK方法：

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private firestore: AngularFirestore) {
    // 示例：获取集合数据
    this.firestore.collection('items').valueChanges().subscribe(data => {
      console.log(data);
    });
  }
}

若使用模块化API（推荐），则按以下方式编写：

import { Component, OnInit } from '@angular/core';
import { getFirestore, collection, getDocs } from '@angular/fire/firestore';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const db = getFirestore();
    const itemsCol = collection(db, 'items');
    getDocs(itemsCol).then(snapshot => {
      console.log(snapshot.docs.map(doc => doc.data()));
    });
  }
}

4. 清理缓存并重新构建 #

更新依赖后，清理缓存避免残留问题：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
ng build --clean

5. 更新firebase-tools版本 #

你当前使用的firebase-tools 11.21版本较旧，建议升级到匹配版本：

npm install -g firebase-tools@^12.0.0

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