如何从Firebase version 7中删除数据?

Question

我正在使用firebase v7.21.1，我有这个问题，当我从我的webApp中删除一个文件时，文件消失了，但是当我重新加载页面时，它仍然存在，当我点击它时，它给了我一个错误消息:代码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}`);
}
};