AngularFire自定义类调用异常：collection()参数错误排查

在Angular组件中直接使用AngularFire功能一切正常，但将Firestore相关逻辑迁移到自定义的FirestoreService类后，出现以下错误：

FirebaseError: [code=invalid-argument]: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

以下是使用的依赖版本、应用配置、组件及服务代码：

依赖版本 #

"@angular/animations": "^18.0.0",
"@angular/cdk": "^18.0.1",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/fire": "^18.0.1",
"@angular/forms": "^18.0.0",
"@angular/material": "^18.0.1",
"@angular/platform-browser": "^18.0.0",
"@angular/platform-browser-dynamic": "^18.0.0",
"@angular/router": "^18.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"

App配置（app.config.ts） #

export const appConfig: ApplicationConfig = {
    providers: [
        provideZoneChangeDetection({ eventCoalescing: true }),
        provideAnimationsAsync(),
        provideFirebaseApp(() => initializeApp(environment.firebase)),
        provideAuth(() => getAuth()),
        provideFirestore(() => getFirestore()),
    ]
};

组件代码（items.component.ts） #

export class ItemsComponent {
    items: Item[] = [];

    constructor(private firestoreService: FirestoreService) {
        firestoreService.items$.subscribe(items => {
            this.items = items;
        });
    }
}

自定义服务代码（firestore.service.ts） #

import { Firestore, collectionData, collection } from '@angular/fire/firestore';

@Injectable({
    providedIn: 'root'
})
export class FirestoreService {
    items$: Observable<Item[]>;
    private firestore: Firestore = Inject(Firestore);

    constructor() {
        const itemCollection = collection(this.firestore, 'items');
        this.items$ = collectionData<Item>(itemCollection);
    }
}

错误根源是你在服务类构造函数外直接调用Inject(Firestore)的方式不符合Angular依赖注入规则——这种写法无法正确获取Firestore实例，导致this.firestore为undefined，传入collection()时触发参数合法性校验失败。

修正方法很简单，将Firestore依赖注入移到构造函数参数中，让Angular的DI系统自动处理实例注入：

import { Firestore, collectionData, collection } from '@angular/fire/firestore';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class FirestoreService {
    items$: Observable<Item[]>;

    constructor(private firestore: Firestore) { // 直接在构造函数参数中声明依赖
        const itemCollection = collection(this.firestore, 'items');
        this.items$ = collectionData<Item>(itemCollection);
    }
}

修正后，组件中调用服务的逻辑无需改动，保持原样即可。同时请确保Item类型已正确定义，避免类型推断相关的隐性问题。

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