使用Firebase动态键名存储用户选择月份报错求助

嘿，我一眼就发现问题所在啦！你这段代码的报错根源是对象字面量中动态属性名的语法错误，咱们一步步来修正：

问题分析 #

在saveUserToUsersRef方法里，你尝试直接用变量this.months[0].selectedOption作为对象的属性名，写法{ this.months[0].selectedOption : "test"}不符合JavaScript语法规范——JS会把this.months[0].selectedOption当成普通标识符，而不是动态变量，所以直接抛出语法错误。

修正方案 #

有两种常用的解决方式，根据你的环境选择即可：

方案1：ES6+计算属性名（推荐） #

用方括号[]包裹变量，就能把它作为动态属性名使用，这是ES6引入的语法，现在大部分前端环境都支持：

saveInBdd (){ 
  this.errors = []; 
  const user = firebase.auth().currentUser; 
  user.updateProfile({ 
    displayName: this.firstname, 
  }).then(()=>{ 
    this.saveUserToUsersRef(user) 
  }, error => { 
    this.errors.push(error.message) 
  }) 
}, 
saveUserToUsersRef(user){
  // 用方括号包裹变量作为属性名
  return this.usersRef.child(user.uid).update({
    tab1: {
      [this.months[0].selectedOption]: "test"
    }
  })
}

方案2：ES5兼容写法（适配旧环境） #

如果你的项目需要兼容不支持ES6的环境，可以先创建空对象，再动态添加属性：

saveInBdd (){ 
  this.errors = []; 
  const user = firebase.auth().currentUser; 
  user.updateProfile({ 
    displayName: this.firstname, 
  }).then(()=>{ 
    this.saveUserToUsersRef(user) 
  }, error => { 
    this.errors.push(error.message) 
  }) 
}, 
saveUserToUsersRef(user){
  const tab1Data = {};
  // 动态给对象添加属性
  tab1Data[this.months[0].selectedOption] = "test";
  return this.usersRef.child(user.uid).update({
    tab1: tab1Data
  })
}

额外优化建议 #

为了避免this.months[0]不存在或者selectedOption为空导致的潜在问题，建议加个简单的校验：

saveUserToUsersRef(user){
  const selectedMonth = this.months[0]?.selectedOption;
  if (!selectedMonth) {
    this.errors.push("请选择一个月份");
    return Promise.reject("未选择月份");
  }
  return this.usersRef.child(user.uid).update({
    tab1: {
      [selectedMonth]: "test"
    }
  }).catch(error => {
    this.errors.push(error.message);
    throw error; // 保留错误传递，方便后续处理
  })
}

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