如何优化Firebase存储与Firestore用户资料更新逻辑避免代码重复

其实这个问题很好解决，核心就是把「获取最终头像URL」和「更新Firestore用户资料」这两步拆分开，用async/await把异步操作串起来，让更换头像和不更换头像的场景共享同一段更新逻辑，彻底消除代码重复。

具体实现思路 #

1. 先统一处理头像URL：判断用户是否上传了新头像，如果有就上传到Storage并获取下载URL；如果没有，直接沿用用户当前的头像URL（或者业务逻辑里的默认值）。
2. 统一执行Firestore更新：拿到最终的头像URL后，只需要写一次Firestore更新代码，不管有没有换头像，都用这个URL去更新用户资料。

优化后的代码示例 #

async function saveProfile(userData, newAvatarFile = null) {
  try {
    // 第一步：统一获取最终要使用的头像URL
    let avatarUrl = userData.currentAvatarUrl; // 默认使用当前已有的头像URL

    if (newAvatarFile) {
      // 上传新头像到Firebase Storage
      const storageRef = firebase.storage().ref(`avatars/${userData.uid}`);
      await storageRef.put(newAvatarFile);
      // 等待获取下载URL
      avatarUrl = await storageRef.getDownloadURL();
    }

    // 第二步：只写一次Firestore更新逻辑，两种场景复用
    await firebase.firestore()
      .collection('users')
      .doc(userData.uid)
      .update({
        name: userData.name,
        bio: userData.bio,
        avatarUrl: avatarUrl,
        // 其他需要更新的用户字段都放在这里
      });

    console.log('用户资料更新成功！');
    return true;
  } catch (error) {
    console.error('更新资料时出错:', error);
    throw error; // 抛出错误让上层调用者处理
  }
}

为什么这样写更好？ #

• 彻底消除代码重复：Firestore的更新逻辑只实现了一次，不管用户有没有换头像，都走这同一段代码，后续维护只需要改这一处。
• 逻辑更清晰：用await把异步操作变成线性流程，避免了嵌套回调或者重复的条件分支，读代码的时候一眼就能看懂流程。
• 错误统一处理：所有异步操作（上传头像、更新Firestore）的错误都在同一个try/catch里捕获，便于统一做错误提示或者日志记录。

额外细节补充 #

• 如果是新用户没有当前头像URL，可以给avatarUrl设个默认值（比如空字符串，或者项目里的默认头像地址）。
• 上传头像时如果需要进度提示，可以在put方法里加监听，但这属于额外功能，不影响核心的代码复用逻辑。

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