Vi que esta pregunta fue publicada hace 2 días. Probé las correcciones que lo resolvieron para otra persona, sin embargo, todavía no puedo entender dónde me estoy equivocando. Estoy tratando de hacer que una página de contacto funcione usando React. ¡Gracias por adelantado!
import React, { useState } from 'react'; import '../App.css'; import { db } from '../firebase'; const Contact = () => { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [message, setMessage] = useState(''); const handleSubmit = (e) => { e.preventDefault(); db.collection('contacts') .add({ name:name, email:email, message:message, }) .then(() => { alert('Message submitted 👍' ); }) .catch((error) => { alert(error.message); }); setName(''); setEmail(''); setMessage(''); }; return ( ) } export default Contactarchivo firebase.js:
import { initializeApp } from "firebase/app"; import { getFirestore } from 'firebase/firestore' const firebaseConfig = { apiKey: "", authDomain: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "" }; const app = initializeApp(firebaseConfig); const db = getFirestore(app) export { db }No está exportando db como base de datos, sino toda la instancia de la aplicación Firebase. Intenta refactorizar tu código para que exporte la instancia de Firestore como db :
import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const app = initializeApp(firebaseConfig); const db = getFirestore(app) export { db }También está utilizando el nuevo Modular SDK (v9) que tiene una sintaxis completamente nueva. Recomiendo seguir la documentación para entenderlo. Tu consulta debe ser:
import { collection, addDoc } from "firebase/firestore"; import {db} from "../firebase" const handleSubmit = (e) => { e.preventDefault(); addDoc(collection(db, "contacts"), { name:name, email:email, message:message, }) .then(() => { alert('Message submitted 👍' ); }) .catch((error) => { alert(error.message); }); setName(''); setEmail(''); setMessage(''); };