如何捕获Firebase Storage文件不存在的报错，或提前校验文件是否存在

问题原因说明 #

你在控制台看到的404是浏览器自带的网络请求错误日志，并非JavaScript未捕获的异常。只要调用getDownloadUrl()时文件不存在，服务端返回404状态码，浏览器就会默认打印这条日志，无法通过前端代码主动屏蔽，属于正常现象，不会影响你的业务逻辑运行。

你尝试用普通try/catch包裹逻辑无效，是因为getDownloadUrl()是异步Promise方法，同步的try/catch无法捕获异步抛出的错误。

可选处理方案 #

方案1：调用前验证文件是否存在

可以通过getMetadata()方法先查询文件元信息，查询成功则说明文件存在，再获取下载地址，逻辑更清晰：

import firebase from 'firebase/app';
import 'firebase/storage';

// ...

const [imageUrl, setImageUrl] = useState(null)

// ...

const storageRef = firebase.storage().ref('path_to_image')
storageRef
  .getMetadata()
  .then(() => {
    // 文件存在，再获取下载地址
    return storageRef.getDownloadUrl()
  })
  .then((v) => {
    setImageUrl(v)
  })
  .catch(() => {
    setImageUrl(null)
  })

注意：该方案依然会触发浏览器的404网络日志，只是提前完成了存在性校验。

方案2：直接处理图片加载异常

如果你的核心需求是图片能正常展示、不存在时隐藏或显示占位图，可以不用提前校验，直接在img标签上通过onError事件处理加载失败的情况：

{
  imageUrl && <img 
    src={imageUrl}
    alt="资源图"
    onError={(e) => {
      // 替换为占位图，或者直接隐藏图片
      e.target.style.display = 'none'
    }}
  />
}

方案3：用async/await + try/catch捕获异步错误

如果你习惯用try/catch写法，需要把逻辑放到async函数中，才能正常捕获异步异常：

const fetchImage = async () => {
  const storageRef = firebase.storage().ref('path_to_image')
  try {
    const url = await storageRef.getDownloadUrl()
    setImageUrl(url)
  } catch {
    setImageUrl(null)
  }
}
// 调用fetchImage触发查询
fetchImage()

额外提示 #

注意检查getDownloadUrl的方法名拼写，部分Firebase版本的方法名为驼峰写法getDownloadURL（URL全大写），拼写错误也会导致异常。

内容的提问来源于stack exchange，提问作者Simon Tran