React中删除Firebase存储及Firestore文件报错：无法对根引用执行deleteObject

错误原因 #

你碰到的错误是因为用完整URL创建Storage引用的方式不对。代码里用ref(storage, url)时，第二个参数应该是存储桶内的相对路径（比如images/xxx.png），但你传入的是完整的Storage文件URL，这会导致创建出无效的根级引用，触发storage/invalid-root-operation错误，对应的中文错误信息为：

FirebaseError: Firebase Storage: 无法对根引用执行'deleteObject'操作，请使用child创建非根引用，比如.child('file.png')。(storage/invalid-root-operation)

修复步骤 #

1. 正确创建Storage引用 #

在Firebase v9模块化语法中，要从完整URL创建引用，需使用refFromURL函数（需先导入），替换原来的ref调用：

// 先导入所需方法
import { refFromURL, deleteObject } from "firebase/storage";

const onDelete = (e) => {
    const { url } = e.target;
    console.log("Url", url);
    // 用refFromURL替代ref来从完整URL创建引用
    const deleteRef = refFromURL(url);

    deleteObject(deleteRef)
      .then(() => {
        console.log("文件已从Firebase Storage删除", deleteRef);
      })
      .catch((error) => {
        console.log(error.message);
        toast.error(error.message);
      });

    // Firestore删除逻辑保持不变
    const imageDelete = db.collection("images").where("imageURL", "==", url);
    imageDelete.get().then(function (querySnapshot) {
      querySnapshot.forEach(function (doc) {
        doc.ref.delete();
      });
      console.log相关文档已从Firestore删除");
    });
};

2. 优化异步操作顺序（可选但推荐） #

当前代码中，Storage删除和Firestore删除是并行执行的，可能出现其中一个失败、另一个成功的不一致情况。建议用异步函数+Promise.all保证操作的原子性：

// 记得导入所需的Firestore方法
import { getDocs, deleteDoc } from "firebase/firestore";

const onDelete = async (e) => {
    const { url } = e.target;
    console.log("Url", url);
    const deleteRef = refFromURL(url);

    try {
        // 先删除Storage中的文件
        await deleteObject(deleteRef);
        console.log("文件已从Firebase Storage删除", deleteRef);

        // 再批量删除Firestore中对应的文档
        const querySnapshot = await getDocs(db.collection("images").where("imageURL", "==", url));
        const deleteTasks = querySnapshot.docs.map(doc => deleteDoc(doc.ref));
        await Promise.all(deleteTasks);
        console.log("相关文档已从Firestore删除");
    } catch (error) {
        console.log(error.message);
        toast.error(error.message);
    }
};

补充说明 #

如果你的url不是完整的Storage URL，而是存储桶内的相对路径，那需要检查是否路径为空或者格式错误（比如开头多了斜杠），确保传入ref(storage, path)的是有效的相对路径。

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