Angular项目配置AngularFire遇FirebaseError问题求助

报错信息 #

FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

代码环境 #

• Angular CLI: 16.0.6
• @angular/fire: 7.6.1

已完成检查 #

• collection()函数已正确导入
• collection()第一个参数为通过inject(Firestore)获取的实例
• environment.ts中Firebase配置信息无误
• 通过ng add @angular/fire完成安装
• AppModule配置与官方文档一致

解决方法 #

1. 调整Firestore注入时机 #

将inject(Firestore)移至构造函数内部执行，避免属性初始化阶段出现依赖未就绪的问题：

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  firestore: Firestore;
  items$: Observable<any[]>;

  constructor() {
    this.firestore = inject(Firestore);
    const aCollection = collection(this.firestore, 'items');
    this.items$ = collectionData(aCollection);
  }
}

2. 延迟Firestore操作至初始化完成 #

实现OnInit接口，在ngOnInit中执行Firestore相关操作，确保Firebase App已完成初始化：

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent implements OnInit {
  firestore: Firestore = inject(Firestore);
  items$: Observable<any[]>;

  ngOnInit(): void {
    const aCollection = collection(this.firestore, 'items');
    this.items$ = collectionData(aCollection);
  }
}

3. 验证版本兼容性并更新 #

确保AngularFire与Firebase SDK版本匹配，执行更新命令：

npm install @angular/fire@latest firebase@latest

4. 检查模块导入顺序 #

确认provideFirebaseApp在provideFirestore之前导入，保证初始化顺序正确：

imports: [
  BrowserModule,
  AppRoutingModule,
  provideFirebaseApp(() => initializeApp(environment.firebase)),
  provideAuth(() => getAuth()),
  provideFirestore(() => getFirestore())
]

5. 清理缓存并重启服务 #

清理Angular缓存后重启开发服务器，解决依赖加载异常：

ng cache clean
npm start -- --clearCache

验证 #

修改完成后重启开发服务器，若问题仍存在，可尝试创建全新Angular项目重新配置AngularFire，逐步添加代码排查潜在的项目配置问题。

内容的提问来源于stack exchange，提问作者Laïta