在反应应用程序中获取快照侦听器错误

Question

我是 React 新手，我正在使用 React js 和 firebase 构建一个 todo 应用程序。 Firebase 已成功连接到 React 应用程序，但我收到此错误。它还在说 FirebaseError：缺少或权限不足。能否请您解释一下问题是什么以及如何解决。

代码如下

import React, { useState, useEffect } from 'react';
import { Button } from '@material-ui/core';
import db from './firebase';
import Todo from './Todo';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');


  useEffect(() => {

    db.collection('todos').onSnapshot(snapshot => {
      setTodos(snapshot.docs.map(doc => doc.data().todo));
    })
  }, []);


  const addTodo = (event) => {
    event.preventDefault();
    setTodos([...todos, input]);
    setInput('');
  }
  return (
    <div className="App">
      <form>
        <input placeholder="Your ToDo's" onChange={event => { setInput(event.target.value) }} value={input} />
        <Button type="submit" disabled={!input} variant="contained" onClick={addTodo} color="primary">
          Add todo
        </Button>
      </form>

      <ul>
        {todos.map(todo => (
          <Todo text={todo} />
        ))}
      </ul>
    </div>
  );
}

export default App;

Answer 1

您需要更新您的 firestore.rules 以在 collection/document 上允许 read。

看看这个：https://firebase.google.com/docs/firestore/security/get-started

更新文件后，您可以使用以下方法部署新规则：

firebase deploy --only firestore:rules --project YOUR_PROJECT_ID

在反应应用程序中获取快照侦听器错误

getting snapshot listener error in react application

snapshot

reactjs