时间戳

首页 > 解决方案 > Cloud Firestore 集合未显示在 Cloud Firestore 的数据库中

reactjs - Cloud Firestore 集合未显示在 Cloud Firestore 的数据库中

问题描述

我正在关注谷歌驱动器克隆的教程https://www.youtube.com/watch?v=6XTRElVAZ9Y&t=1468s。24:00，他在 cloud firestore 中创建了一个数据库，当他添加文件夹时，它出现在 cloud firestore 中。我也做了同样的事情，但集合没有反映在数据库中。新注册用户的身份验证和数据在 firebase 中运行良好。但是当我尝试添加一个集合时，它没有显示出来。

这是 firebase.js 文件。

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

const app = firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID
});

const firestore = app.firestore();
export const database = {
folders: firestore.collection("folders"),
files: firestore.collection("files")
};
export const auth = app.auth();
export default app;

这是添加文件夹的文件 AddFolder.js

import React, { useState } from "react";
import { Button, Modal, Form } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFolderPlus } from "@fortawesome/free-solid-svg-icons";
import { database } from "../../firebase";
import { useAuth } from "../../context/AuthContext";

export default function AddFolderButton({ currentFolder }) {
const [open, setOpen] = useState(false);
const [name, setName] = useState("");
const { currentUser } = useAuth();

function openModal() {
setOpen(true);
}

function closeModal() {
setOpen(false);
}
//                     This is the function where collection is added to firebase
function handleSubmit(e) {
e.preventDefault();
//           Below is the add part. I also tried to make it await database.folders.add({...})
database.folders           
  .add({
    name: name
  })
  .catch(function (error) {
    console.error(
      "There was an error uploading a file to Cloud Storage:",
      error
    );
  });
setName("");
closeModal();
}

return (
 <>
  <Button onClick={openModal} variant="outline-success" size="sm">
    <FontAwesomeIcon icon={faFolderPlus} />
  </Button>
  <Modal show={open} onHide={closeModal}>
    <Form onSubmit={handleSubmit}>
      <Modal.Body>
        <Form.Group>
          <Form.Label>Folder Name</Form.Label>
          <Form.Control
            type="text"
            required
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </Form.Group>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={closeModal}>
          Close
        </Button>
        <Button variant="success" type="submit">
          Add Folder
        </Button>
      </Modal.Footer>
    </Form>
   </Modal>
  </>
 );
 }

该集合未添加到云 firestore。我尝试在 firebase 中创建一个新项目，并在 .env 文件中使用了新项目的新凭据。但这没有用。当我试图等待 handleSubmit() 函数的 database.folder.add(....) 部分并且控制台在添加部分之后记录了一些内容时，没有记录任何内容。触发添加部分后花了很长时间，并且使用 async 和 await 时没有记录任何内容。

然后我从 github 克隆了 youtuber 的存储库，并在 .env 文件中添加凭据后尝试使用他完成的项目，但它也没有工作。请帮助解决此问题。

由于我使用的是 CodesandboxIO，任何想要查看我正在做的项目的人都可以使用https://codesandbox.io/s/divine-leaf-twc2r?file=/src/components/google-drive/访问

编辑 1：这是 firestore 的架构。 Schema 的图片链接

这是我用于从 firestore 获取集合的代码

function handleSubmit(e) {
    e.preventDefault();
    db.collection("folders")
      .get()
      .then((snapshots) => {
        snapshots.docs.forEach((doc) => {
          console.log(doc);
        });
      });
    setName("");
    closeModal();
  }

我试图在我的电脑上关闭防火墙。但是当我第一次单击按钮获取时，它显示了我的第一个评论中提到的 Permission denied 错误，当我再次单击时，它给出了一个空数组。我已经检查了firestore中的规则，我已经将它们设置为始终为真。

标签： reactjsfirebasegoogle-cloud-firestore

解决方案

创建集合 Firestore 并不总是立即反映，尤其是在空数据库上，这只是页面刷新修复的 UI 怪癖。

真正的关键是您能否在将数据推送到您的 Firebase 项目后读取数据，因为新用户在错误的项目甚至错误的数据库中查找是很常见的。您可以使用 .get()同一参考上的方法对此进行测试。

我还将在每个步骤中创建 console.log，以确保您的函数正确有效地执行，因为在同步块内运行异步任务不会阻塞，并且可以在被捕获之前过早结束函数。

我看到您有function声明，也可能存在绑定问题，在某些情况下，这可能会脱离 firebase 范围，请确保您使用箭头函数来减少此问题。

推荐阅读