Firebase上传URL未同步至MongoDB的异步执行问题求解

核心问题在于你依赖了React状态传递URL，但setState是异步更新的——即使你调用了setImgUrl和setSongUrl，状态不会立刻更新，这时候调用saveDataToMongo自然拿不到正确的URL。直接用异步操作返回的结果就行，别绕状态这一步。

修正方案一：串行上传并直接传递URL #

先完成图片上传拿到URL，再处理歌曲，最后直接用拿到的URL调用保存函数：

const handleUpload = async () => {
  try {
    // 处理图片上传
    const imgRef = ref(storage, `images/${img.name}`);
    await uploadBytes(imgRef, img);
    const imgDownloadUrl = await getDownloadURL(imgRef);

    // 处理歌曲上传
    const songRef = ref(storage, `songs/${song.name}`);
    await uploadBytes(songRef, song);
    const songDownloadUrl = await getDownloadURL(songRef);

    // 两个URL都就绪，直接传入保存函数
    await saveDataToMongo(imgDownloadUrl, songDownloadUrl);
    // 这里可以加成功提示等逻辑
  } catch (err) {
    console.error("上传/保存失败:", err);
  }
};

修正方案二：并行上传提升效率 #

如果图片和歌曲上传没有依赖关系，可以用Promise.all同时执行两个上传任务，节省时间：

const handleUpload = async () => {
  try {
    // 封装图片上传+获取URL的异步任务
    const getImgUrl = async () => {
      const imgRef = ref(storage, `images/${img.name}`);
      await uploadBytes(imgRef, img);
      return getDownloadURL(imgRef);
    };

    // 封装歌曲上传+获取URL的异步任务
    const getSongUrl = async () => {
      const songRef = ref(storage, `songs/${song.name}`);
      await uploadBytes(songRef, song);
      return getDownloadURL(songRef);
    };

    // 等待两个任务都完成，解构拿到两个URL
    const [imgDownloadUrl, songDownloadUrl] = await Promise.all([getImgUrl(), getSongUrl()]);

    // 调用保存函数
    await saveDataToMongo(imgDownloadUrl, songDownloadUrl);
  } catch (err) {
    console.error("上传/保存失败:", err);
  }
};

关键注意点 #

1. 不要依赖React状态传递刚生成的异步结果——setState的更新是批量且异步的，同步访问状态只能拿到旧值。
2. 如果saveDataToMongo是异步函数，必须加await，确保保存操作完成后再执行后续逻辑（比如页面跳转、成功提示）。
3. 一定要加try/catch捕获上传或保存过程中的错误，避免程序崩溃。

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