React 环境下如何将文件上传至 Firebase Storage 并获取 getDownloadURL

API 探路者

2026-10-3

问题修复方案

核心错误点

getDownloadURL() 是异步方法，未加await导致获取到的是Promise对象而非真实下载链接
React state更新为异步机制，刚执行setUrl()就直接读取url变量，拿到的是更新前的旧值
Firestore的doc()方法仅接受文档ID作为唯一参数，原代码传入4个参数的写法不符合API规范

修正后代码（仅需替换`handleSubmit`方法即可）

const handleSubmit = async (e) => {
  e.preventDefault()
  try {
    setMessage('')
    setError('')

    if(!name || !file){
      setError('请填写项目名称并选择上传文件')
      return
    }

    const storageRef = projectStorage.ref()
    // 给文件名加时间戳避免重名覆盖原有文件
    const fileName = `${Date.now()}_${file.name}`
    const fileRef = storageRef.child(fileName)
    await fileRef.put(file)
    
    // 加await获取真实下载链接
    const downloadUrl = await fileRef.getDownloadURL()
    
    // 直接用获取到的下载链接写入数据库，避开state异步更新问题
    await projectFirestore.collection('projects')
      .add({ name, link, url: downloadUrl, desc })

    setMessage('项目添加成功')

    setName('')
    setLink('')
    setFile(null)
    setDesc('')
    setUrl('')
  } catch (err) {
    console.error('添加失败错误详情：', err)
    setError('项目添加失败')
  }
}