Angular应用添加数据至Firestore模拟器不显示问题求助

环境与现状 #

• Angular 17.0.0，Firebase JS SDK 10.7.2，Firebase Tools全局版本10.7.2（本地环境显示10.3.0）
• Auth模拟器功能正常，可正常创建、登录用户
• 应用已发送请求到Firestore模拟器，但数据未在模拟器UI、Firefoo中显示；手动添加到模拟器的数据可正常导入/导出

Firebase配置与模拟器启动命令 #

演示环境Firebase配置 #

firebase: {
  apiKey: "******",
  authDomain: "t3-training-***.firebaseapp.com",
  projectId: "demo-t3-training-***",
  storageBucket: "t3-training-***.appspot.com",
  messagingSenderId: "170427355128",
  appId: "1:170427355128:web:1145047c4a8500d940d00d",
},

模拟器启动CLI命令 #

firebase emulators:start --project=demo-t3-training-*** --import=./.firebase/saved-data/

相关代码 #

添加入库服务代码 #

private firestore = inject(FIRESTORE);
private messagesCollection = collection(this.firestore, 'trainingRecords');


addRecord$ = this.addRecordRequest$.pipe(
  exhaustMap((action) =>
    defer(() => addDoc(this.messagesCollection, action.payload))
  ),
  toRequestSource('[FEAT RECORDS] record added')
);

Firestore注入配置 #

const app = initializeApp(environment.firebase);
const isDevelopment = isDevMode();

export const FIRESTORE = new InjectionToken('Firebase firestore', {
  providedIn: 'root',
  factory: () => {
    let firestore: Firestore;
    if (isDevelopment) {
      firestore = initializeFirestore(app, {});
      connectFirestoreEmulator(firestore, 'localhost', 8080);
    } else {
      firestore = getFirestore();
    }
    return firestore;
  },
});

注：应用位于NX单体仓库，Firebase配置存于独立库，通过isDevMode()判断是否连接模拟器

关键警告日志 #

Multiple projectIds are not recommended in single project mode.
Requested project ID t3-training-48794, but the emulator is configured
for demo-t3-training-48794. To opt-out of single project mode add/set
the ""singleProjectMode": false" property in the firebase.json
emulators config.

已尝试的排查步骤 #

• 确认CLI启动命令与配置中的Project ID完全一致
• 卸载重装Firebase Tools，切换至11版本，问题仍未解决

排查方向 #

1. Project ID溯源：日志显示请求使用的Project ID为t3-training-48794，与模拟器配置的demo-t3-training-***不符，需检查：

   • NX仓库中是否存在其他环境配置文件覆盖了environment.firebase.projectId
   • isDevMode()是否正常生效，确保开发环境加载的是正确的配置
   • 是否存在其他Firebase应用实例初始化，导致Project ID被覆盖

2. Firestore初始化优化：

   • 确认connectFirestoreEmulator调用在initializeFirestore之后，且参数（localhost:8080）正确
   • 尝试在初始化时显式指定Project ID：

     firestore = initializeFirestore(app, { projectId: environment.firebase.projectId });
     

3. 版本一致性校验：本地与全局Firebase Tools版本存在差异，执行npx firebase-tools --version确认实际使用版本，用全局版本启动模拟器：

   npx firebase-tools@10.7.2 emulators:start --project=demo-t3-training-*** --import=./.firebase/saved-data/
   

4. 关闭单项目模式：按日志提示，在firebase.json的emulators配置中添加"singleProjectMode": false，允许模拟器处理多Project ID请求：

   "emulators": {
     "firestore": {
       "port": 8080
     },
     // 其他模拟器配置项
     "singleProjectMode": false
   }
   

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