为何在Firebase Storage中需两次选择不同图片才能显示？

核心代码问题分析 #

• setState异步更新导致上传参数失效：React的setImage是异步操作，你在调用setImage(e.target.files[0])后立刻使用image变量创建上传任务时，image仍为初始的null值，导致第一次上传任务没有有效文件，上传完成的回调永远不会触发，url一直停留在加载状态。
• 缺失本地预览逻辑：用户选择图片后直接触发上传并显示加载，既没有即时反馈，也掩盖了上传失败的问题。
• 遗漏useState导入：原代码中使用了useState但未导入，会引发运行时错误，影响功能正常执行。

修复后的完整代码 #

import { useCookies } from "react-cookie";
import { ref, uploadBytesResumable, getDownloadURL, getStorage } from "firebase/storage";
import styled from "styled-components";
import { useState } from "react"; // 补全缺失的导入

const Avatar = styled.div`
width: 250px;
height: 250px;
border-radius: 50%;
background-size: cover;
background-position: center;
cursor: pointer;
`;

function Photo() {
  const [cookies] = useCookies(["userName"]);
  const [image, setImage] = useState(null);
  const [url, setUrl] = useState("./images/UploadPic.svg");

  const handleChange = (e) => {
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      // 先显示本地预览图，即时反馈用户操作
      const localPreviewUrl = URL.createObjectURL(selectedFile);
      setUrl(localPreviewUrl);

      // 直接使用选中的文件创建上传任务，避开异步state的坑
      const storage = getStorage();
      const storageRef = ref(storage, `images/${cookies.userName}`);
      const uploadTask = uploadBytesResumable(storageRef, selectedFile);

      uploadTask.on(
        "state_changed",
        (snapshot) => {
          // 可选：可根据上传进度做更精细的状态提示
          // const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        },
        (error) => {
          switch (error.code) {
            case "storage/unauthorized":
              console.log("无权访问存储服务");
              setUrl("./images/UploadPic.svg"); // 出错后恢复初始上传图
              break;
            case "storage/canceled":
              console.log("上传已取消");
              break;
            case "storage/unknown":
              console.log("未知存储错误");
              setUrl("./images/UploadPic.svg");
              break;
            default:
              console.log("非存储相关错误");
              setUrl("./images/UploadPic.svg");
          }
        },
        () => {
          // 上传完成后替换为在线URL，并释放本地预览资源
          getDownloadURL(storageRef).then((onlineUrl) => {
            setUrl(onlineUrl);
            URL.revokeObjectURL(localPreviewUrl);
          });
        },
      );
      setImage(selectedFile); // 可选：保存文件到state，供后续使用
    }
  };

  return (
    <div style={{ alignSelf: "center" }}>
      <label htmlFor="file-input">
        <Avatar style={{ backgroundImage: `url(${url})` }} />
      </label>
      <input id="file-input" type="file" accept="image/*" onChange={handleChange} />
    </div>
  );
}

export default Photo;

Firebase规则排查（若代码修复后仍有问题） #

检查Firebase Storage规则是否允许当前用户上传文件，确保路径和权限匹配：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /images/{userId} {
      // 仅允许登录用户上传/读取自己的图片
      allow write: if request.auth != null && request.auth.uid == userId;
      allow read: if request.auth != null && request.auth.uid == userId;
    }
  }
}

注意：如果代码中cookies.userName不是用户的UID，需要调整规则中的匹配逻辑。

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