React项目中无法通过imageURL删除Firestore文档的问题

我开发了一个React应用，用户可将图片上传至Firebase Storage，图片URL会与userID等信息一同存入Firestore文档。删除图片时需要同时删除Storage中的文件和对应的Firestore文档，但目前仅Storage删除逻辑正常，Firestore文档无法删除，操作时出现「n.indexOf is not a function」错误。

现有删除代码 #

useEffect(() => {
    listAll(imageListRef.current).then((response) => {
      response.items.forEach((item) => {
        getDownloadURL(item).then((url) => {
          setImageList((prev) => [...prev, url]);
        });
      });
    });
  }, []);

const onDelete = (e) => {
    // id 为imageURL
    const { id } = e.target;
    console.log("Index: ", id);

    // Storage中的删除逻辑可正常工作
    const deleteRef = ref(storage, id);
    deleteObject(deleteRef)
      .then(() => {
        console.log("Item was deleted from Firebase Storage", deleteRef);
      })
      .catch((error) => {
        console.log(error.message);
        toast.error(error.message);
      });

    // 尝试删除Firestore文档（方案1）
    try {
      const imageDelete = collection(db, "images", where("imageURL", "==", id));
      imageDelete.get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          doc.ref.delete();
        });
        console.log("Image should have been deleted from Firestore");
      });
    } catch (error) {
      console.log(error.message);
    }

    // 尝试删除Firestore文档（方案2）
    try {
      const imageDelete = collection(db, "images", where("imageURL", "==", id));
      imageDelete.forEach((doc) => {
        console.log(doc.ref);
        deleteDoc(doc.ref);
      });
    } catch (error) {
      console.log(error.message);
    }
  };

return (
  {imageList.map((url, index) => {
    // 渲染图片及点击触发删除的相关HTML
  })}
);

错误原因 #

两种删除方案的核心问题是Firebase v9+模块化API中，collection()函数不能直接传入where条件。查询条件必须通过query()函数将collection和where包装后使用，直接传递会导致API解析错误，出现「n.indexOf is not a function」。

另外注意：上传代码中使用的是videos集合，但删除时用的是images集合，若为笔误需统一集合名称，否则会查询不到目标文档。

正确解决方案 #

修改onDelete函数，使用query()创建正确的查询，同时将Storage删除与Firestore删除的异步操作通过Promise链式调用，统一处理错误并更新本地状态：

const onDelete = (e) => {
  const { id } = e.target;
  console.log("Image URL: ", id);

  // 统一处理Storage删除与Firestore文档删除
  const deleteRef = ref(storage, id);
  deleteObject(deleteRef)
    .then(() => {
      console.log("文件已从Firebase Storage删除", deleteRef);
      // 查询匹配imageURL的Firestore文档
      return getDocs(query(collection(db, "images"), where("imageURL", "==", id)));
    })
    .then((querySnapshot) => {
      // 遍历所有匹配文档，执行删除
      const deleteTasks = querySnapshot.docs.map(doc => deleteDoc(doc.ref));
      return Promise.all(deleteTasks);
    })
    .then(() => {
      console.log("对应Firestore文档已删除");
      // 更新本地状态，移除已删除的图片URL
      setImageList(prev => prev.filter(url => url !== id));
    })
    .catch((error) => {
      console.error("删除失败:", error.message);
      toast.error(error.message);
    });
};

关键说明 #

• 正确创建查询：用query(collection(db, "images"), where("imageURL", "==", id))生成符合API要求的查询对象，再通过getDocs()获取查询结果。
• 异步操作串联：将Storage删除、Firestore查询、文档删除的Promise链式调用，确保操作顺序，同时统一捕获所有错误。
• 本地状态更新：删除成功后过滤imageList，移除已删除的URL，保证UI与后端数据同步。
• 集合名统一：确认上传与删除逻辑使用的集合名称一致（上传代码中是videos，删除时是images，需根据实际情况修正）。

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