TypeError: _firebase__webpack_importted_module__db .db.集合不是函

Question

我看到这个问题是2天前发布的。我尝试了解决它的修复为别人，但我仍然无法弄清楚我在哪里出错。我正试图获得使用React工作的联系页面。提前感谢!

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 Contact

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 } 

Answer 1

您不是将Firestore导出为db，而是将整个Firebase应用实例导出。试着重构你的代码，这样它就可以将Firestore实例导出为db:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const app = initializeApp(firebaseConfig);
const db = getFirestore(app)
export { db } 

你也正在使用新的模块化SDK (v9)，它有一个全新的语法。我建议按照文档来理解它。你的查询应该是:

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('');
};