Vue使用Firestore的updateDoc时变量作为字段名报错如何解决

问题排查与解决 #

1. 语法报错原因

你遇到的Unexpected keyword 'this'是纯JS语法错误：JavaScript对象字面量的键名默认会被解析为字符串常量，不能直接将this.member_name这种表达式作为键名使用。
如果要把变量/表达式的动态值作为对象的键，需要使用ES6的计算属性名语法，用方括号把表达式包裹起来即可。

2. 隐藏逻辑问题修复

你现在的写法会直接覆盖member_list字段下已有的所有成员数据，达不到「新增成员」的效果。更稳妥的写法是用Firestore的点路径规则更新嵌套字段，避免覆盖原有数据。

3. 修改后代码

仅需要替换submit方法中的updateDoc部分即可：

async submit() {
  try {
    this.project_name = this.$route.query.project_name
    const projectDoc = doc(db, "projects", this.project_name);
    // 用计算属性名+点路径写法，只新增成员不覆盖原有数据
    await updateDoc(projectDoc, {
      [`member_list.${this.member_name}`]: {
        name: this.member_name,
        task: 0,
        task_status: 0,
      }
    });
    // 成功后再提示用户
    alert("Add new member successfully!")
    // 可选：清空输入框
    this.member_name = ''
    this.member_email = ''
  } catch (err) {
    console.error("添加成员失败：", err)
    alert("添加成员失败，请重试")
  }
}

如果确实需要重写整个member_list对象，也可以把原键名改为计算属性写法：

await updateDoc(projectDoc, {
  member_list: {
    // 用方括号包裹动态键名
    [this.member_name]: {
      name: this.member_name,
      task: 0,
      task_status: 0,
    }  
  },
});

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