Firebase Realtime Database插入覆盖而非追加，JS/Vue中如何实现追加写入？

1. 使用了覆盖写入API：set()方法的默认行为是替换指定路径下的全部现有数据，因此多次调用同路径下的set()时，后写入的数据会直接覆盖旧数据。
2. 路径构造错误：Firebase Web 9+ 模块化API中ref()的第二个参数为完整路径字符串，不可拆分传入多个独立参数。

要实现追加写入，优先使用Firebase自带的push()方法：该方法会自动在指定路径下生成一个时间有序的唯一键存储新数据，不会覆盖原有内容，刚好适配你按训练类型分类存储多条训练记录的需求。

修正后的代码如下：

writeUserData: function() {
  const db = getDatabase();
  // 构造单条训练数据
  const data = {
    'weight': this.weight,
    'reps': this.reps,
    'sets': this.sets,
    'date': Date(),
  }
  // 正确构造训练类型对应的根路径
  const workoutTypeRef = ref(db, `users/${this.name}/${this.workoutType}`);
  // push自动生成唯一键追加写入新数据，不会覆盖旧内容
  push(workoutTypeRef, data);
},

如果需要自定义数据键（比如用时间戳作为键），也可以用如下写法实现不覆盖的追加写入：

writeUserData: function() {
  const db = getDatabase();
  const data = {
    'weight': this.weight,
    'reps': this.reps,
    'sets': this.sets,
    'date': Date(),
  }
  // 用时间戳作为自定义键，保证不会重复
  const customKey = Date.now().toString();
  const userRef = ref(db, `users/${this.name}/${this.workoutType}/${customKey}`);
  set(userRef, data);
},

写入后数据库结构和你期望的完全匹配：

• users
  • 人员a
    • 二头弯举
      • 唯一键1: 第一条二头弯举训练数据
      • 唯一键2: 第二条二头弯举训练数据
    • 卧推
      • 唯一键1: 第一条卧推训练数据
  • 人员b
    • 二头弯举
      • 唯一键1: 第一条二头弯举训练数据
    • 深蹲
      • 唯一键1: 第一条深蹲训练数据

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