Angular 16集成Firestore报错：collection()参数类型异常求助

问题描述 #

在Angular 16项目中使用Firestore（依赖版本：Firebase 10.3.1、@angular/fire 7.5.0）执行添加数据操作时，抛出错误：

ERROR FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

核心原因 #

@angular/fire与Firebase主版本不兼容：

• @angular/fire 7.x系列仅适配Firebase 9.x版本
• 当前使用的Firebase 10.3.1属于更高主版本，API交互逻辑不匹配导致参数类型校验失败

解决方案 #

1. 调整版本匹配 #

选择以下两种方案之一：

方案A：升级@angular/fire到适配Firebase 10.x的版本

执行命令升级依赖：

npm install @angular/fire@latest firebase@latest

@angular/fire 8.x+版本原生支持Angular 16和Firebase 10.x系列。

方案B：降级Firebase到9.x版本

执行命令降级Firebase：

npm install firebase@9.23.0

该版本与@angular/fire 7.5.0完全兼容。

2. 确认Firestore初始化配置正确 #

确保项目中已正确初始化Firebase及Firestore服务：

传统NgModule项目（app.module.ts）

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

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 初始化Firebase App
    provideFirebaseApp(() => initializeApp({
      apiKey: "你的API_KEY",
      authDomain: "你的AUTH_DOMAIN",
      projectId: "你的PROJECT_ID",
      storageBucket: "你的STORAGE_BUCKET",
      messagingSenderId: "你的SENDER_ID",
      appId: "你的APP_ID"
    })),
    // 提供Firestore服务
    provideFirestore(() => getFirestore())
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Standalone组件项目（app.config.ts）

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideFirebaseApp(() => initializeApp({
      // 填入你的Firebase配置信息
    })),
    provideFirestore(() => getFirestore())
  ]
};

3. 避免API冲突 #

确保代码中仅导入@angular/fire/firestore提供的API，不要同时混用Firebase原生SDK（firebase/firestore）的方法，避免类型混淆。

验证 #

调整版本并确认配置后，重新运行项目，调用addData方法即可正常向Firestore添加数据。

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