Angular 19调用Firestore出现「Firebase API注入上下文外调用」警告

问题分析 #

功能正常但控制台持续出现警告的核心原因是：Firebase API在Angular的注入上下文之外被执行，异步操作（如getDocs的Promise回调）可能会脱离Angular的注入上下文，触发该警告。

解决方案 #

方案1：用runInInjectionContext包裹Firestore操作 #

在服务中将Firestore的API调用包裹在runInInjectionContext中，强制操作在Angular的注入上下文内执行：

修改my-service.ts：

import { inject, Injectable, Injector, runInInjectionContext } from '@angular/core';
import { collection, Firestore, getDocs, query, where } from '@angular/fire/firestore';
import { Object } from '../model/object';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  private firestore = inject(Firestore);
  private injector = inject(Injector);

  async getAllObjects(): Promise<Object[]> {
    // 用runInInjectionContext包裹所有Firestore操作
    return runInInjectionContext(this.injector, async () => {
      const ref = collection(this.firestore, 'MyFirestoreCollection');
      const q = query(ref, where('isActive', '==', true));
      const snapshot = await getDocs(q);
      
      const allObjects: Object[] = [];
    
      for (const doc of snapshot.docs) {
        const data = doc.data();
        const myObject = new Object(
          doc.id,
          data['idFunc'],
        );
        allObjects.push(myObject);
      }
    
      return allObjects;
    });
  }
}

方案2：配置Firestore使用Angular NgZone #

在app.config.ts中指定Firestore运行在Angular的NgZone内，确保上下文不丢失：

import { provideHttpClient } from '@angular/common/http';
import { ApplicationConfig } from '@angular/core';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { environment } from '../environments/environment';
import { provideFirestore, getFirestore, withZoneNgZone } from '@angular/fire/firestore';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideHttpClient(),
    // 添加withZoneNgZone配置，强制Firestore操作在NgZone内执行
    provideFirestore(() => getFirestore(), withZoneNgZone()),
  ]
};

方案3：更新@angular/fire到兼容版本 #

旧版本的@angular/fire在Angular 19的standalone应用中可能存在注入上下文适配问题，执行命令更新到最新兼容版本：

npm install @angular/fire@latest

可选优化：组件中用async/await简化代码 #

虽然不直接解决警告，但可以消除嵌套回调，让代码更简洁：
修改home.component.ts的ngOnInit：

async ngOnInit(): Promise<void> {
  this.myList = await this.myService.getAllObjects();
}

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