React项目中如何删除Firebase Storage中的图片？

一、上传时直接存储图片路径 #

这是最可靠的方案——上传阶段你必然会指定图片的存储路径，只需把这个路径和图片的其他信息（比如预览URL、唯一标识）一起存入数据库（如Firestore），删除时直接从数据库取出路径即可。

示例代码：

// 上传逻辑
import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
import { getFirestore, doc, setDoc } from "firebase/firestore";

const storage = getStorage();
const firestore = getFirestore();

const uploadImage = async (file) => {
  // 自定义存储路径，可用时间戳+文件名避免重复
  const storagePath = `user-uploads/${Date.now()}_${file.name}`;
  const storageRef = ref(storage, storagePath);
  
  await uploadBytes(storageRef, file);
  const downloadURL = await getDownloadURL(storageRef);
  
  // 将路径与下载URL同步存入Firestore
  await setDoc(doc(firestore, "uploaded-images", Date.now().toString()), {
    url: downloadURL,
    storagePath: storagePath,
    uploadTime: new Date()
  });
};

删除时直接调用：

import { getStorage, ref, deleteObject } from "firebase/storage";
import { getFirestore, doc, deleteDoc } from "firebase/firestore";

const deleteImage = async (storagePath, docId) => {
  const storage = getStorage();
  const imageRef = ref(storage, storagePath);
  
  try {
    await deleteObject(imageRef);
    // 同步删除数据库中的记录
    await deleteDoc(doc(getFirestore(), "uploaded-images", docId));
    console.log("图片删除成功");
  } catch (error) {
    console.error("删除失败:", error);
  }
};

二、从下载URL反推存储路径 #

如果之前没存储路径，只有图片的下载URL，可通过字符串解析提取路径。Firebase Storage下载URL格式固定为：
https://firebasestorage.googleapis.com/v0/b/[项目ID].appspot.com/o/[编码后的路径]?alt=media&token=[令牌]

只需提取/o/与?之间的部分，再解码URL编码字符即可：

const extractStoragePath = (downloadURL) => {
  const pathSegment = downloadURL.split('/o/')[1].split('?')[0];
  return decodeURIComponent(pathSegment);
};

// 使用示例
const testURL = "https://firebasestorage.googleapis.com/v0/b/my-project.appspot.com/o/user-uploads%2F1690000000_test.jpg?alt=media&token=abc123";
const storagePath = extractStoragePath(testURL);
// 输出：user-uploads/1690000000_test.jpg

三、通过Storage引用直接获取路径 #

如果保留了上传时生成的Storage引用对象，可直接通过fullPath属性获取完整路径：

const storageRef = ref(storage, "user-uploads/study.png");
console.log(storageRef.fullPath); // 输出：user-uploads/study.png

注意事项 #

• 确保Firebase Storage规则允许删除操作，例如：allow delete: if request.auth != null;（可根据权限需求调整）。
• 优先选择第一种方案，避免URL解析可能因格式变更导致的异常。

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