Блог

Я начинающий разработчик React и создаю тестовый проект для найма в одну компанию. Проект представляет собой простой блог с функциональностью CRUD. Я мог бы вывести все данные (заголовок, описание) из базы данных Firestore на главную страницу. Поэтому теперь я должен позволить пользователю публиковать больше статей, введя название и описание в форме. Я и раньше искал решение проблемы, но мне ничто не может помочь. Что не так с моим кодом?

Форма:

 import * as React from 'react'; import { useState } from 'react'; import { Button, CssBaseline, TextField, Box, Typography, Container} from '@material-ui/core'; import db from '../firebase'; import { ChangeEvent } from 'react'; import firebase from 'firebase/compat/app'; import 'firebase/compat/firestore'; import 'firebase/database'; import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore";  export default function Form(){  const [title, setTitle] = useState();  const [body, setBody] = useState();   const Push = (e) =gt; {  e.preventDefault();   db.firestore().collection("posts") lt;-- LINE WITH THE ERROR  .add({  title:title,  body:body  })  .then(() =gt; {  alert('Message submitted 👍');  })  .catch((error) =gt; {  alert(error.message);  });  };   const handleChange = (e: ChangeEventlt;HTMLInputElementgt;)=gt; {  const newValue = e.target.value;  }    return (  lt;Container component="main" maxWidth="xs"gt;  lt;CssBaseline /gt;  lt;Box  sx={{  marginTop: '50%',  display: 'flex',  flexDirection: 'column',  alignItems: 'center',  }}  gt;  lt;Typography component="h1" variant="h5"gt;  Publish your new article  lt;/Typographygt;  lt;Box sx={{ mt: 1 }}gt;  lt;form onSubmit={Push}gt;  lt;TextField  margin="normal"  fullWidth  id="title"  label="Title*"  name="title"  autoFocus  value={title}  onChange={handleChange}  /gt;  lt;TextField  fullWidth  label="Description*"  multiline  rows={4}  id="body"  name="body"  value={body}  onChange={handleChange}  /gt;  lt;Button  type="submit"  fullWidth  variant="contained"  color="success"  sx={{ mt: 3, mb: 2 }}  gt;  Publish  lt;/Buttongt;  lt;/formgt;  lt;/Boxgt;  lt;/Boxgt;  lt;/Containergt;  ); }  

Конфигурация:

 import firebase from 'firebase/compat/app'; import 'firebase/compat/firestore';  const firebaseConfig = {  apiKey: "AIzaSyAR-u-2RC0DdsYsyxBedmjDDX6499u4aMc",  authDomain: "blog-8ef8b.firebaseapp.com",  databaseURL: "https://blog-8ef8b-default-rtdb.europe-west1.firebasedatabase.app",  projectId: "blog-8ef8b",  storageBucket: "blog-8ef8b.appspot.com",  messagingSenderId: "762459312901",  appId: "1:762459312901:web:5a6b842b2c63099f3cdd6c",  measurementId: "G-G90RCKHRWK" };  firebase.initializeApp(firebaseConfig);  export default firebase;