Firestore上传图片已存至Firebase但img字段空白无法获取

问题表现 #

执行图片上传操作后Firestore返回结果为空，核实确认文件已成功存入Firebase存储服务，但数据库记录中无法读取到img字段的有效值。
原有上传实现代码：

uploadTask.on(
    "state_changed",
    (snapshot) => {
      const progress =
        (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      setProgress(progress);
      switch (snapshot.state) {
        case "paused":
          console.log("Upload is paused");
          break;
        case "running":
          console.log("Upload is running");
          break;
        default:
          break;
      }
    },
    (error) => {
      console.log(error);
    },
    () => {
      getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
        setData((prev) => ({
          ...prev,
          img: downloadURL,
        }));
      });
    }
  );

问题复现截图：

根因说明 #

• 异步时序错误：getDownloadURL是异步方法，若Firestore写入逻辑写在uploadTask.on监听外部，会在图片下载地址还没返回、img字段还没赋值时就触发存库，最终写入的img为空。
• 状态读取时机错误：若使用React等框架的状态管理，状态更新是异步批处理逻辑，setData触发后同步读取data变量拿不到最新的img值，用这个值存库就会出现字段为空的问题。

修复方案 #

把Firestore写入逻辑移到获取到下载地址的回调内部，直接使用回调里拿到的完整数据对象存库，不要依赖更新后的状态做存库操作，参考代码：

uploadTask.on(
  "state_changed",
  (snapshot) => {
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    setProgress(progress);
    switch (snapshot.state) {
      case "paused":
        console.log("Upload is paused");
        break;
      case "running":
        console.log("Upload is running");
        break;
      default:
        break;
    }
  },
  (error) => {
    console.log("上传出错", error);
  },
  async () => {
    // 等待拿到文件可访问下载地址
    const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
    // 直接拼接完整的待存库数据，不依赖异步更新后的状态
    const recordData = {
      // 这里替换成你原本要存的其他字段
      ...baseFormData,
      img: downloadURL
    };
    // 更新本地状态
    setData(recordData);
    // 执行Firestore写入操作
    await addDoc(collection(db, "对应存储集合名"), recordData);
  }
);

调试时可先在getDownloadURL回调中打印downloadURL确认地址正常返回，再逐步核对存库逻辑的执行时机，确保存库操作在地址赋值完成后触发。

内容的提问来源于stack exchange，提问作者Russell Bañares