如何正确配置Firebase并在Firestore中获取数据

如何解决如何正确配置Firebase并在Firestore中获取数据

最近，我通过密切关注一些教程来学习React，但是由于没有正确设置ReactJS和Firebase之间的集成并且没有为我获取数据，我的Web应用程序陷入了困境。这就是我到目前为止所拥有的。?

firebaseconfig

import firebase from "firebase"

const firebaseApp = firebase.initializeApp({
    
    aapiKey: "AIzaSyBgkd-S5YDJM5ZdMy4jv6B3lyI-ICwiJP8",authDomain: "fecebook-messanger-clone.firebaseapp.com",databaseURL: "https://fecebook-messanger-clone.firebaseio.com",projectId: "fecebook-messanger-clone",storageBucket: "fecebook-messanger-clone.appspot.com",messagingSenderId: "504219440010",appId: "1:504219440010:web:dbb3bfcc715ddcf4a26e73",measurementId: "G-XSYZEK2EF7"

});

const db = firebaseApp.firestore();

export default  db ;

以及 App.js 中的代码：

    import React,{useState,useEffect} from 'react';
    import './App.css';
    import {Button,FormControl,InputLabel,Input } from '@material-ui/core';
    import Message from './Message';
    import db from './firebase'
    import firebase from 'firebase';
    
    function App() {
      const [input,setInput] = useState('');
      const [messages,setMessages] = useState([]);
      const [username,setUsername] = useState('');
      console.log(input);
      console.log(messages);
    
      useEffect(() => {
        //run once when the app component load
        db.collection('messages').onSnapshot(snapshot => {
          setMessages(snapshot.docs.map(doc => doc.data()))
        })
      },[])
    
      useEffect(() => {
       setUsername (prompt('Please enter your name ?'))
      },[])
    
      const sendMessage = (event) => {
        // all the logic to send message goes
        event.preventDefault();
        db.collection('messages').add({
          message: input,username: username,timestamp: firebase.firestore.FieldValue.serverTimestamp() 
        })
    
        //setMessages([...messages,{ username: username,message: input}])
        setInput('');
      }
    
      return (
        <div className="App">
          <h1>Hello Issam :) </h1>
          <h2>Welcome {username}</h2>
    
         <form>
         <FormControl>
          <InputLabel htmlFor="my-input">Enter a message ...</InputLabel>
          <Input value={input} onChange={(event) => setInput(event.target.value)}/>
          <Button disabled={!input} variant="contained" color="primary" onClick={sendMessage}>Send Message</Button>
         </FormControl>
    
         
         </form>
          
    
          { /* message themsleves */}
          {
            messages.map((message) => (
              <Message username={username} message={message} />
            ))
          }
        </div>
      );
    }
    
    export default App;
```

解决方法

您正在使用“ aapiKey”而不是“ apiKey”调用firebase.initializeApp。可能是问题所在

,

是的，兄弟！我正在解决这个问题，当您查看我的Firestore规则时，它们应该匹配：

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