Angular集成Firestore服务报错，无法确定正确导入模块

问题重现 #

我编写了一个基础的ItemService，代码如下：

@Injectable({
    providedIn: "root"
})
export class ItemService {
    private db!: CollectionReference<DocumentData>;

    constructor(private firestore: Firestore) {
        this.initDb();
    }

    private initDb() {
        if (this.firestore) {
            this.db = collection(this.firestore, "items");
        }
    }

    getItems(): Observable<Item[]> {
        if (this.db) {
            return collectionData(this.db).pipe(
                map((items: DocumentData[]) => {
                    return items.map((item: DocumentData) => item as Item);
                })
            );
        } else {
            return new Observable();
        }
    }
}

在HomeComponent中使用该服务：

export class HomeComponent implements OnInit {
    item$: Observable<Item[]> | null = null;
    db: CollectionReference<DocumentData> | undefined;

    constructor(private itemService: ItemService) {}

    ngOnInit(): void {
        this.item$ = this.itemService.getItems();
    }
}

操作无特殊，但控制台报错：

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomeModule)[ItemService -> ItemService -> Firestore -> Firestore]:  NullInjectorError: No provider for Firestore!

尝试将ItemService加入HomeModule的providers数组：

@NgModule({
    declarations: [HomeComponent, CarouselComponent],
    imports: [CommonModule, RouterModule.forChild(routes), FormsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatCardModule],
    providers: [ItemService],
    bootstrap: []
})
export class HomeModule {}

此时报错变为：

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomeModule)[ItemService -> Firestore -> Firestore -> Firestore]:  NullInjectorError: No provider for Firestore! NullInjectorError: R3InjectorError(HomeModule)[ItemService -> Firestore -> Firestore -> Firestore]

导入Firestore后（import { Firestore } from "@angular/fire/firestore";），又出现：

Error: NG0204: Can't resolve all parameters for Firestore

此前直接在组件中操作Firestore正常，移到独立服务后出问题。使用版本：

"@angular/core": "^16.2.3",
"@angular/fire": "^7.6.1",

解决方法 #

问题核心是Angular Fire的Firestore模块未正确配置到应用中，导致依赖注入容器无法找到Firestore的提供者。

步骤1：在AppModule中正确导入Angular Fire模块 #

确保AppModule中已经导入并配置了Angular Fire的核心模块和Firestore模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// 导入Angular Fire核心和Firestore模块
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 初始化Firebase应用
    provideFirebaseApp(() => initializeApp({
      // 替换为你的Firebase配置信息
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    })),
    // 提供Firestore服务
    provideFirestore(() => getFirestore())
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤2：移除HomeModule中多余的ItemService配置 #

因为ItemService已经使用providedIn: "root"声明为根级服务，不需要再在HomeModule的providers数组中添加，直接删除该行即可：

@NgModule({
    declarations: [HomeComponent, CarouselComponent],
    imports: [CommonModule, RouterModule.forChild(routes), FormsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatCardModule],
    // 移除此行：providers: [ItemService],
    bootstrap: []
})
export class HomeModule {}

步骤3：确保服务中的Firestore注入正确 #

ItemService中的Firestore注入方式是正确的，只需确保导入语句完整：

import { Firestore, collection, collectionData } from '@angular/fire/firestore';
import { Observable, map } from 'rxjs';
import { Injectable } from '@angular/core';
import { DocumentData, CollectionReference } from '@firebase/firestore';
// 导入你的Item类型
import { Item } from './item.model';

原理说明 #

Angular Fire v7+ 使用函数式提供者（provideFirebaseApp、provideFirestore）来配置Firebase服务，而非传统的模块导入。如果根模块未正确配置这些提供者，依赖注入容器无法解析Firestore实例，导致注入失败。

另外，providedIn: "root"会让服务自动注册到根注入器，无需在子模块重复添加，否则可能引发注入层级冲突。

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