React应用Firebase图片上传停滞0%且启动延迟问题

核心问题 #

你的代码存在两个关键问题导致上传异常：

1. 初始状态imageFile设为字符串""，首次useEffect执行时访问imageFile.name会抛出类型错误，阻塞后续逻辑，引发上传启动延迟。
2. uploadTask在imageFile可能无效时就提前创建，导致资源异常，进而使上传进度停滞。

修正后的代码 #

状态与上传逻辑代码

const [imageFile, setImageFile] = useState(null)
const [percentage, setPercentage] = useState(null)
const [data, setData] = useState({})
const [progress, setProgress] = useState(0)

useEffect(() => {
  if (!imageFile) return;

  const uploadImageFile = () => {
    console.log("image upload started")
    setShowInfo1(false)
    const name = imageFile.name
    const storageRef = ref(storage, `website images/${name}`)
    const uploadTask = uploadBytesResumable(storageRef, imageFile)

    uploadTask.on('state_changed', 
      (snapshot) => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log('Upload is ' + progress + '% done');
        setPercentage(progress)
        switch (snapshot.state) {
          case 'paused':
            console.log('Upload is paused');
            break;
          case 'running':
            console.log('Upload is running');
            break;
          default:
            break;
        }
      }, 
      (error) => {console.error('上传错误:', error)}, 
      () => {
        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
          console.log("上传完成")
          setData((prev) => ({...prev, img:downloadURL}))      
        });
      }
    );
  }

  uploadImageFile() 
}, [imageFile])

文件选择组件代码（无需修改）

<label htmlFor="websiteImageUpload">upload images</label>
<input type="file" id="websiteImageUpload" onChange={(e) => setImageFile(e.target.files[0])} style={{ display: "none"}} required></input>

修正说明 #

• 状态初始化修正：将imageFile初始值改为null，避免非File对象时访问name属性抛出错误，从根源消除启动延迟。
• 无效逻辑拦截：在useEffect开头增加if (!imageFile) return，跳过无文件时的无效代码执行。
• 资源创建时机调整：将storageRef和uploadTask的创建移到uploadImageFile内部，确保仅在需要上传时才初始化资源，避免提前创建导致的异常。
• 错误日志优化：使用console.error替代console.log，更清晰地展示上传错误信息，便于排查权限或网络问题。

额外排查步骤 #

如果修正后仍有问题，可检查以下内容：

• 确认Firebase Storage安全规则允许当前用户上传（测试阶段可临时设置为allow read, write: if true;，生产环境需配置严格规则）。
• 查看浏览器控制台是否存在CORS或网络请求错误，确认Firebase Storage域名未被浏览器拦截。
• 测试上传小文件，排除大文件超时导致的进度停滞问题。

内容的提问来源于stack exchange，提问作者234htjBB23