从Mat Dialog向Angular Firestore集合添加字段的问题

问题核心 #

你只将表单的details数据存入了Firestore，没有把主组件传递的用户ID合并到保存对象中，导致集合里缺少id字段。

具体修复代码 #

1. 调整Dialog组件的提交逻辑

在提交时把用户ID和表单数据合并成完整对象：

onSubmit() {
  // 合并主组件传递的ID与表单输入的详情
  const savePayload = {
    id: this.data, // 这里的this.data就是主组件传入的用户ID
    details: this.userForm.value.details
  };
  this.clientService.addDetails(savePayload);
}

2. 修改服务的addDetails方法

更新方法参数，接收合并后的完整对象并写入Firestore：

// 先定义符合需求的类型（如果未定义）
interface Detail {
  id: string;
  details: string;
}

addDetails(detail: Detail) {
  this.db.collection('Details')
    .add(detail)
    .then(() => console.log('详情保存成功'))
    .catch(err => console.error('保存失败:', err));
}

备选方案（保留原参数结构）

如果不想修改Dialog的传参方式，也可以在服务内部合并ID和详情：

addDetails(id: string, formData: { details: string }) {
  const savePayload = {
    id,
    details: formData.details
  };
  this.db.collection('Details')
    .add(savePayload)
    .then(() => console.log('详情保存成功'))
    .catch(err => console.error('保存失败:', err));
}

可选优化：添加表单验证

确保用户输入详情后才能提交：

import { Validators } from '@angular/forms';

// 初始化表单时添加必填验证
this.userForm = new FormGroup({
  'details': new FormControl('', Validators.required)
});

注意事项 #

• 确认this.data确实是主组件传递的用户ID字符串，如果是对象（比如{ userId: 'xxx' }），要改成this.data.userId提取ID值。
• Firestore的add方法会自动生成文档ID，如果想把用户ID作为文档ID，改用doc(id).set(savePayload)替代add。

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