Firebase Storage首次请求下载URL返回null的问题排查

问题根源 #

首次提交时服务器收到的Image_URI为空数组，本质是React useState的异步更新特性导致的：

• 在handleFirebaseURI中调用setURI(url)后，React不会立即更新URI状态，而是将更新放入队列等待批量处理
• handleSubmit中await handleFirebaseURI()执行完毕后立刻调用fetchReq，此时fetchReq读取到的是URI的初始值（空数组[]）
• 第二次提交时，URI已经保留了上一次提交的正确URL，所以能正常传递

修复方案 #

不要依赖useState传递下载URL，直接在handleFirebaseURI中返回URL，然后在handleSubmit中接收并传给fetchReq，彻底避开异步状态更新的问题。

1. 修改handleFirebaseURI函数，返回下载URL

const handleFirebaseURI = async () => {
  try {
    const metadata = {
      contentType: 'image/jpeg'
    };
    const response = await fetch(image);
    const blob = await response.blob();
    // substring是同步操作，无需await
    const filename = image.substring(image.lastIndexOf('/') + 1);
    const imageRef = ref(storage, `${user.email}/${Date.now() + filename}`);

    // 统一用await替代.then，代码更清晰
    const snapshot = await uploadBytesResumable(imageRef, blob, metadata);
    const downloadUrl = await getDownloadURL(snapshot.ref);
    alert("Success");
    return downloadUrl;
  } catch (error) {
    alert(error.message || "图片上传失败");
    throw error; // 抛出错误，让上层可以处理
  }
};

2. 修改handleSubmit函数，接收下载URL并传递给fetchReq

const handleSubmit = async () => {
  await getLocation();
  // 获取下载URL
  const downloadUrl = await handleFirebaseURI();
  // 将URL传给fetchReq
  await fetchReq(downloadUrl);

  // 重置UI状态
  setAddress('');
  setAddedField([]);
  setNeededInput([]);
  setImage(null);
  setUploading(false);
};

3. 修改fetchReq函数，接收传入的下载URL

const fetchReq = async (downloadUrl) => {
  const token = user && (await user.getIdToken());
  const requestOptions = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify({
      propertyAddress,
      address,
      addedField,
      URI: downloadUrl, // 使用传入的真实下载URL
      local,
      user: user.email
    })
  };
  // 加上await确保请求发送完成再执行后续操作
  await fetch('http://10.0.2.2:5000/ReadInfo', requestOptions);
};

额外优化点 #

• 移除了原代码中混合使用await和.then/.catch的写法，统一用try/catch处理错误，代码可读性更强
• 去掉了filename变量前不必要的await，因为substring是同步方法
• 在fetchReq中添加await，确保HTTP请求发送完成后再重置UI状态，避免请求中断

内容的提问来源于stack exchange，提问作者VCS-Jacob