如何在Angular 18独立组件中配置多Firestore项目为可注入服务？

错误原因分析 #

你遇到的问题主要来自三个点：

1. 全局配置的provideFirestore()没有关联到具体的Firebase App实例，导致AngularFire无法匹配对应配置
2. 服务中使用private firestore = Inject(PROJECT_1);的写法不符合Angular 14+的注入规范，应该使用inject()函数
3. InjectionToken的factory直接调用getApp()可能在Firebase App初始化前执行，引发依赖时机问题

修正后的实现代码 #

1. main.ts：为每个Firebase App单独配置Firestore

bootstrapApplication(AppComponent, {
  providers: [
    // 配置第一个Firebase App及对应Firestore实例
    provideFirebaseApp(() => initializeApp(firebaseConfig.project_1, 'PROJECT_1')),
    provideFirestore(({ app }) => getFirestore(app), { qualifier: 'PROJECT_1' }),
    
    // 配置第二个Firebase App及对应Firestore实例
    provideFirebaseApp(() => initializeApp(firebaseConfig.project_2, 'PROJECT_2')),
    provideFirestore(({ app }) => getFirestore(app), { qualifier: 'PROJECT_2' }),
  ]
});

2. project_1.service.ts：正确注入指定实例的Firestore

import { inject, Injectable } from '@angular/core';
import { Firestore, collection, getDocs } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class Project1Service {
  // 通过qualifier注入对应PROJECT_1的Firestore实例
  private firestore = inject(Firestore, { qualifier: 'PROJECT_1' });

  public async getData(path: string) {
    const dataRef = collection(this.firestore, path);
    const documents = await getDocs(dataRef);
    // 可选：将文档转换为带ID的结构化数据
    return documents.docs.map(doc => ({ id: doc.id, ...doc.data() }));
  }
}

关键修正说明 #

• 按实例绑定Firestore：每个provideFirebaseApp对应一个provideFirestore，通过qualifier参数关联到具体的App实例，确保AngularFire能正确识别不同项目的配置
• 正确使用注入函数：Angular 14+推荐使用inject()函数在类成员中完成注入，替代旧的Inject()装饰器写法
• 避免初始化时机问题：通过注入带qualifier的FirebaseApp实例，确保Firebase App已完成初始化后再创建Firestore实例，避免提前调用getApp()引发的错误

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