如何从 Firebase 版本 7 中删除数据？

Question

我正在使用 firebase v7.21.1，我遇到了这个问题，当我从我的 webApp 中删除一个文件时，fie 消失了，但是当我重新加载页面时，它仍然存在，当我点击它时，它给了我一个错误消息：代码 403，权限被拒绝，文件仍在我的 firebase 数据库中。 有人遇到过这个问题吗？ 检查下面的代码。

import React from "react"
import { Container } from "react-bootstrap"
import { useFolder } from "../../hooks/useFolder"
import AddFolderButton from "./AddFolderButton"
import AddFileButton from "./AddFileButton"
import Folder from "./Folder"
import File from "./File"
import Navbar from "./Navbar"
import FolderBreadcrumbs from "./FolderBreadcrumbs"
import { useParams, useLocation } from "react-router-dom"
import { useState, useContext, useEffect } from "react";
import { storage } from "../../firebase"



export default function Dashboard() {
  const { folderId } = useParams()
  const { state = {} } = useLocation()
  const [allFiles, setFiles] = useState([]);
  const { folder, childFolders, childFiles } = useFolder(folderId, state.folder)


  useEffect(() => {
    setFiles(childFiles);
  }, [childFiles]);


  const deleteFromFirebase = (url) => {
    console.log(url);
          let fileRef = storage.refFromURL(url.url);
    console.log(fileRef);
          fileRef
            .delete()
            .then(() => {
              setFiles(allFiles.filter((childFile) => childFile !== url));
              alert("File deleted successfully!");
            })
            .catch((err) => {
              console.log(err);
            });
        };

      

  return (
    
    
    <>
    
      <Navbar />
      <Container fluid>
        <div className="d-flex align-items-center">
          <FolderBreadcrumbs currentFolder={folder} />
          <AddFileButton currentFolder={folder} />
          <AddFolderButton currentFolder={folder} />
        </div>
        {childFolders.length > 0 && (
          <div className="d-flex flex-wrap">
            {childFolders.map(childFolder => (
              <div
                key={childFolder.id}
                style={{ maxWidth: "250px" }}
                className="p-2"
              >
                <Folder folder={childFolder} />
              </div>
            ))}
          </div>
        )}

        {childFolders.length > 0 && childFiles.length > 0 && <hr />}
        {childFiles.length > 0 && (
          <div className="flex-wrap">
            {allFiles.map(childFile => ( 
              <div class = "row">
              <div
                key={childFile.id}
                style={{ Width: "auto" }}
                className="p-2"
              >
                <File file={childFile} />
                </div>
                <div style={{ padding: "8px" }}>
                <button type="button"  class="btn btn-primary" onClick={() => deleteFromFirebase(childFile)} confirm="Are your sure?">delete</button>
                </div>
              </div>
            ))}
          </div>
        )}
      </Container>
    </>
  )
}

我在安全规则中使用了这些条件，但问题仍然存在。

service cloud.firestore { 
match /databases/{database}/documents { 
match /{document=**} { 
allow read; 
allow write; 
allow delete; } } } 

service firebase.storage {
  // The {bucket} wildcard indicates we match files in all Cloud Storage buckets
  match /b/{bucket}/o {
    // Match filename
    match /{allPaths=**} {
      allow read;
      allow write;
    }
  }
}

Answer 1

我还必须从 firestore 数据库中添加删除，这现在对我有用...：

 const deleteFromFirebase = async (fileDoc) => {
    try {
      await storage.refFromURL(fileDoc.url).delete();
      await fileDoc.ref.delete();
      setFiles(allFiles.filter((childFile) => childFile !== fileDoc));
      alert("File deleted successfully!");
    } catch (e) {
      alert(`Error while deleting file ${e.message}`);
    }
  };