React Native：Firebase Storage上传图片后无法获取下载URL问题

你的问题核心是上传操作还未完成就调用了getDownloadURL——uploadBytes是异步操作，原代码里没有等待它执行完毕就去请求下载链接，此时Firebase还未完成文件存储，自然无法返回有效URL。

修复后的完整代码 #

const getGSTURI = async () => {
    if (GSTLoading) {
      return;
    }
    setGSTLoading(true);

    const result = await DocumentPicker.getDocumentAsync({
      copyToCacheDirectory: true,
    });
    console.warn(result);

    // 更新状态，后续调用uploadGST直接用result原始值（规避setState异步延迟）
    setGSTName(result.name);
    setGSTURI(result.uri);
    setGSTLoading(false);

    async function uploadGST(uri, name) {
      const blob = await new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function () {
          resolve(xhr.response);
        };
        xhr.onerror = function (e) {
          console.warn(e);
          reject(new TypeError("Network request failed"));
        };
        xhr.responseType = "blob";
        xhr.open("GET", uri, true);
        xhr.send(null);
      });

      const storageRef = ref(storage, `sellers/${sellerID}/${name}`);

      // 关键修改：等待上传完成后再获取下载URL
      try {
        await uploadBytes(storageRef, blob);
        console.warn("GST Upload Successfull");
        
        // 上传完成后调用getDownloadURL
        const url = await getDownloadURL(storageRef);
        console.log(url);
        setGSTURL(url);
        // 注意：setState是异步操作，此处直接打印GSTURL会拿到旧值，需在组件渲染时查看更新后的值
        console.log("GSTURL状态已更新");
      } catch (error) {
        console.warn("上传或获取URL失败:", error);
      } finally {
        // 无论成功失败都释放blob资源
        blob.close();
      }
    }

    // 直接传入result的uri和name，避免依赖setState的异步更新
    uploadGST(result.uri, result.name);
  };

核心修改说明 #

1. 等待上传完成：用await替代.then()链式调用，确保uploadBytes执行完毕后才调用getDownloadURL，保证文件已完全存储到Firebase。
2. 规避状态异步延迟：React的setState是异步操作，原代码中调用uploadGST(GSTURI, GSTName)时，状态值可能还未更新，直接传入result的原始属性更可靠。
3. 统一错误处理：用try/catch捕获上传和获取URL过程中的所有错误，便于调试排查。
4. 修正状态打印问题：setGSTURL(url)后直接打印GSTURL会拿到旧值，状态更新是异步的，建议在组件渲染逻辑中查看最新状态。

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