Angular使用FormGroup更新Firestore子集合文档时新增而非编辑问题排查

核心触发原因 #

你调用set方法时新增而非更新文档，本质是你构造的文档引用路径agencies/${this.agencyId}/contacts/${this.contactsForm.value.contactId}没有匹配到Firestore中已存在的目标文档，Firestore遇到不存在的文档ID时，哪怕携带merge: true参数也会新建对应ID的文档。

常见排查点 #

• 校验this.agencyId取值是否正确
  打印该变量确认和Firestore中已有机构文档的ID完全一致，不存在空值、大小写错误、多余空格等问题，若agencyId不匹配，相当于在错误的父文档下新建子集合文档。
• 校验this.contactsForm.value.contactId取值是否正确
  你当前表单的contactId是开放给用户手动输入的，很容易出现输入值和目标联系人文档ID不匹配的问题，打印该字段和Firestore控制台中联系人子集合的文档ID做比对。
• 编辑场景建议预填充表单值
  正常编辑逻辑应该是用户选中指定联系人后，自动把该联系人的ID、已有字段值填充到表单，建议把contactId输入框设置为禁用/隐藏，避免用户手动修改导致ID错配：

  // 选中联系人后调用
  fillEditForm(selectedContact: Contacts & {id: string}) {
    this.contactsForm.patchValue({
      contactId: selectedContact.id,
      name: selectedContact.name,
      email: selectedContact.email,
      phone: selectedContact.phone
    })
  }
  

替代调试方案 #

你可以临时把set方法替换为update方法排查问题，update只会更新已存在的文档，若路径匹配不到文档会直接抛出错误，方便快速定位问题：

editContactInfo() {
  const newContactRef = this.afs.collection('agencies')
    .doc(this.agencyId)
    .collection<Contacts>('contacts')
    .doc(this.contactsForm.value.contactId);
  // update方法不存在文档时会报错，更容易定位路径问题
  newContactRef.update({
    name: this.contactsForm.value.name,
    email: this.contactsForm.value.email,
    phone: this.contactsForm.value.phone
  }).catch(err => console.error('更新失败，原因：', err))
}

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