如何修复Firebase与React项目中函数重复执行的问题？

核心问题 #

1. 实时监听引发重复执行：代码使用on("value")绑定了实时数据监听，当新数据写入tbl_phone_number时，数据库变动会再次触发监听回调，导致整个逻辑重复执行两次。
2. 低效的手机号校验逻辑：全量读取所有数据后用_.filter过滤匹配手机号，既浪费带宽，在数据量大时还会出现性能问题，属于冗余操作。

修复后的代码 #

registerStaff = async (model) => {
  if (!firebase.apps.length) {
    return false;
  }
  if (!model) {
    return Promise.reject({ type: "error", message: "Invalid model" });
  }

  // 精准查询对应手机号的节点，避免全量读取
  const phoneQuery = this.db.ref("tbl_phone_number")
    .orderByChild("phone")
    .equalTo(model.phone.toString());
  const snapshot = await phoneQuery.once("value");

  if (snapshot.exists()) {
    return {
      type: "phone",
      message: "The phone number is already used.",
    };
  } else {
    // 写入新数据
    const newPostRef = this.db.ref("tbl_phone_number").push();
    await newPostRef.set({ phone: model.phone, type: model.type });
    return {
      type: "success",
      message: "Successfully registered.",
    };
  }
};

关键改动说明 #

• 替换实时监听为单次读取：用once("value")替代on("value")，只会读取一次数据，不会持续监听数据库变动，从根源避免重复执行。
• 用Firebase查询优化校验：通过orderByChild("phone").equalTo(xxx)直接定位目标手机号节点，减少数据传输量，提升校验效率。
• 简化异步逻辑：利用async/await替代嵌套Promise与回调，代码可读性更强，也避免了回调嵌套引发的异常。
• 完善边界处理：增加model为空的判断，提前返回错误提示。

额外注意事项 #

需要在Firebase控制台为tbl_phone_number的phone字段创建查询索引，否则查询会触发报错（Firebase控制台会直接给出创建索引的提示链接，点击即可完成配置）。

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