AngularFire集成Firestore报错：FirestoreModule不存在collection属性

你犯了核心错误：FirestoreModule是Angular模块，仅用于根模块中配置Firestore，不能作为服务注入到组件里。组件需要注入的是Firestore相关服务，而非模块。下面分两种场景给出修复方案：

方案一：使用Compat兼容模式（适配旧版AngularFire写法） #

1. 修改AppModule的导入配置 #

将FirestoreModule替换为兼容版的AngularFirestoreModule：

// AppModule.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { environment } from 'src/environments/environments.prod';

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore'; // 替换原FirestoreModule导入

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './layouts/header/header.component';
import { FooterComponent } from './layouts/footer/footer.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CategoriesComponent } from './categories/categories.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    DashboardComponent,
    CategoriesComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule, // 替换原FirestoreModule
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. 修正组件的注入与调用逻辑 #

导入并注入AngularFirestore服务，替换原有的FirestoreModule注入：

// CategoriesComponent.ts
import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore'; // 替换导入的模块为服务

@Component({
  selector: 'app-categories',
  templateUrl: './categories.component.html',
  styleUrls: ['./categories.component.scss'],
})
export class CategoriesComponent {
  constructor(private afs: AngularFirestore) {} // 注入服务而非模块

  onSubmit(formData: any) {
    const categoryData = {
      category: formData.value.category,
    };

    this.afs.collection('category').add(categoryData); // 正常调用collection方法
  }
}

方案二：使用最新Modular模块化模式（AngularFire v7+官方推荐） #

1. 确认AppModule的基础配置 #

保留FirestoreModule的导入：

// AppModule.ts（此处仅展示关键部分）
imports: [
  BrowserModule,
  AppRoutingModule,
  AngularFireModule.initializeApp(environment.firebaseConfig),
  FirestoreModule,
  FormsModule
],

2. 组件中使用模块化API #

导入Firestore服务及对应的操作方法，采用模块化写法完成数据写入：

// CategoriesComponent.ts
import { Component } from '@angular/core';
import { Firestore, collection, addDoc } from '@angular/fire/firestore'; // 导入模块化API

@Component({
  selector: 'app-categories',
  templateUrl: './categories.component.html',
  styleUrls: ['./categories.component.scss'],
})
export class CategoriesComponent {
  constructor(private firestore: Firestore) {} // 注入Firestore服务

  onSubmit(formData: any) {
    const categoryData = {
      category: formData.value.category,
    };

    // 模块化方式创建集合并添加文档
    const categoryCollection = collection(this.firestore, 'category');
    addDoc(categoryCollection, categoryData)
      .then(() => console.log('数据添加成功'))
      .catch(err => console.error('添加失败:', err));
  }
}

注意事项 #

• 若安装的是最新版AngularFire，优先选择方案二的模块化模式，这是官方当前主推的标准写法。
• 确保environment.firebaseConfig包含Firestore所需的完整项目配置信息。

内容的提问来源于stack exchange，提问作者Tom Küstermann