Ionic+Angular项目向Firestore存数据时用户字段丢失如何解决

云上老周

2026-10-6

问题核心原因

代码存在异步执行顺序不匹配的问题：

authService.getUserData() 返回的是 valueChanges() 类型的可观察对象，订阅后的回调是异步执行的，给 foodToAdd 赋值 cookerName 和 cookerId 的逻辑，晚于后续的 foodCollection.add 提交操作，所以实际提交到Firebase的对象还未完成用户字段赋值。
控制台打印能看到字段是因为浏览器打印引用类型对象时输出的是对象引用，你手动展开查看时异步回调已经执行完成完成了赋值，不代表提交时字段已经存在。

修复方案

把提交Firebase的逻辑放到获取用户数据的异步回调中，同时调整异步流程的顺序即可，修复后的代码如下：

// food.service.ts 调整后的addFood方法
import { take } from 'rxjs/operators';

// ...其他代码

addFood(food: FoodView) {
  this.loadingService.present();
  // 浅拷贝原对象，避免修改外部传入的原始对象
  const foodToAdd: FoodView = {...food};
  return this.authService.getUserData()
    // 只取一次用户数据，避免持续订阅引发内存泄漏
    .pipe(take(1))
    .toPromise()
    .then(u => {
      // 先完成用户字段赋值，再提交到Firebase
      foodToAdd.cookerName = u.displayName;
      foodToAdd.cookerId = u.uid;
      return this.foodCollection.add(foodToAdd);
    })
    .finally(() => {
      // 无论请求成功失败都关闭loading，避免界面卡死
      this.loadingService.dismiss();
    });
}