升级Angular16与AngularFire7.6后，collection()参数错误求助

问题情况 #

项目升级到Angular 16和AngularFire 7.6版本后，加载Firestore简单集合时触发参数错误。控制台报错内容：

core.mjs:10592 ERROR Error: Uncaught (in promise): FirebaseError: [code=invalid-argument]: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

相关服务代码（CategoryService） #

import { Injectable } from '@angular/core';
import {
  Firestore,
  collection,
  collectionData,
  query,
  orderBy,
} from '@angular/fire/firestore';
import { Functions } from '@angular/fire/functions';

@Injectable({
  providedIn: 'root',
})
export class CategoryService {
  colName = 'categories';

  constructor(private afs: Firestore, private afFunctions: Functions) {}

  loadCategories() {
    const colRef = collection(this.afs, this.colName);
    const q = query(colRef, orderBy('counter', 'desc'));
    const col = collectionData(q, { idField: 'id' });
    return col;
  }
}

解决方法 #

这个错误核心原因是AngularFire与Firebase JS SDK版本不兼容，或是存在API导入混淆。可按以下步骤排查修复：

• 同步依赖版本：AngularFire 7.6对应Firebase JS SDK需为9.22.0及以上，执行命令统一版本：

  npm install firebase@^9.22.0 @angular/fire@^7.6.0
  

• 统一API导入：确保所有Firestore操作都使用@angular/fire/firestore导出的方法，不要同时引入原生firebase/firestore的API，避免混淆。
• 清理缓存重启服务：

  rm -rf node_modules package-lock.json
  npm install
  ng serve --open
  

• 检查初始化配置：确认Angular项目中Firestore初始化配置正确，以Angular 16独立组件模式为例，app.config.ts中需正确提供Firestore服务：

  import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
  import { provideFirestore, getFirestore } from '@angular/fire/firestore';
  import { environment } from '../environments/environment';
  import { ApplicationConfig } from '@angular/core';
  
  export const appConfig: ApplicationConfig = {
    providers: [
      provideFirebaseApp(() => initializeApp(environment.firebase)),
      provideFirestore(() => getFirestore()),
      // 其他服务配置
    ]
  };
  

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