Estoy trabajando en este boletín que toma los nombres completos, el correo electrónico y los números de teléfono de los usuarios. Cada vez que intento enviar la información me sale este error ->
Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection is not a function at submit (Newsletter.jsx:13:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1) at invokeGuardedCallback (react-dom.development.js:4270:1) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4284:1) at executeDispatch (react-dom.development.js:9011:1) at processDispatchQueueItemsInOrder (react-dom.development.js:9043:1) at processDispatchQueue (react-dom.development.js:9056:1) at dispatchEventsForPlugins (react-dom.development.js:9067:1) at react-dom.development.js:9258:1Este es mi código ->
firebasse.js
import { initializeApp } from "firebase/app"; import { getFirestore} from "firebase/firestore"; const firebaseConfig = { ... }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); export default db;Boletín.jsx
import { React, useState } from "react"; import "./newsletter.css"; import db from "../../firebase"; const Newsletter = () => { const [userName, setUserName] = useState(""); const [userEmail, setUserEmail] = useState(""); const [userPhoneNumber, setUserPhoneNumber] = useState(""); const submit = (e) => { e.preventDefault(); db.collection("Users").add({ name: userName, email: userEmail, phoneNumber: userPhoneNumber, }); setUserName(""); setUserEmail(""); setUserPhoneNumber(""); };uno de los campos de entrada
<div className="newsletterInput"> <input type="name" onChange={(e) => setUserName(e.target.value)} placeholder="Full Name" required /> </div>Está utilizando la versión modular de Firestore, que es la versión web 9. Hay algunos elementos que necesita agregar/cambiar.
Debe importar los métodos necesarios desde firebase/firestore .
import { collection, addDoc } from "firebase/firestore";La sintaxis para agregar un documento a una colección ha cambiado con v9. Vea el código de muestra a continuación:
// Add a new document with a generated id. const docRef = await addDoc(collection(db, "User"), { name: userName, email: userEmail, phoneNumber: userPhoneNumber });Debería consultar la versión Modular de Firestore. Aquí hay algunos documentos para comenzar: