Firebase Web V9使用URL删除Storage图片时提示无效URL问题求助

你遇到的错误是因为Firebase Storage V9的ref方法无法识别带端口号的完整HTTP URL，且直接使用URL时需要符合特定格式。以下是两种可行的解决方法：

方法一：修正URL格式（移除端口号） #

Firebase Storage的标准HTTPS URL不需要携带:443端口号，直接移除后即可正常创建引用：

import { firestore, storage, database } from "../../firebase"
import { deleteObject, ref } from "firebase/storage";

// 移除重复的storage导入，避免变量冲突
const SingleApplication = () => {

  const deleteImage = () => {
    // 去掉URL中的:443端口
    const ImgUrl = "https://firebasestorage.googleapis.com/v0/b/......appspot.com/o/Application-Imeges%2F09........"

    const dImgRef = ref(storage, ImgUrl)
    deleteObject(dImgRef)
      .then(() => {
        console.log("deleted")
      })
      .catch((error) => {
        console.error("删除失败：", error)
      })
  }

  return (
    <div className='Main'>
      <button onClick={deleteImage}>删除图片</button>
    </div>
  )
}

export default SingleApplication

方法二：解析URL提取存储路径（更可靠） #

如果URL来源不可控，建议解析出文件在Storage中的相对路径（即Bucket内的文件路径），步骤如下：

1. 从URL中提取o/之后到?之前的部分（若存在查询参数则截断）
2. 对提取的字符串进行URL解码（将%2F转换为/）
3. 用解码后的路径创建Storage引用

代码示例：

import { firestore, storage, database } from "../../firebase"
import { deleteObject, ref } from "firebase/storage";

const SingleApplication = () => {

  const deleteImage = () => {
    const ImgUrl = "https://firebasestorage.googleapis.com:443/v0/b/......appspot.com/o/Application-Imeges%2F09........"
    
    // 解析URL提取文件路径
    const urlParts = ImgUrl.split("o/");
    if (urlParts.length < 2) {
      console.error("无效的Storage URL");
      return;
    }
    // 截断可能存在的查询参数
    const encodedPath = urlParts[1].split("?")[0];
    // URL解码得到真实存储路径
    const filePath = decodeURIComponent(encodedPath);

    // 通过文件路径创建引用
    const dImgRef = ref(storage, filePath);
    
    deleteObject(dImgRef)
      .then(() => {
        console.log("deleted")
      })
      .catch((error) => {
        console.error("删除失败：", error)
      })
  }

  return (
    <div className='Main'>
      <button onClick={deleteImage}>删除图片</button>
    </div>
  )
}

export default SingleApplication

额外注意事项 #

• 确保当前用户拥有Firebase Storage的删除权限，可检查项目中Storage的安全规则配置。
• 始终添加错误捕获逻辑，方便排查删除失败的原因。
• 避免重复导入同一模块的变量，防止代码冲突。

内容的提问来源于stack exchange，提问作者Cloud Music