TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.db.collection 不是一个函数。

Question

TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.db.collection 不是一个函数。

javascriptreactjsfirebasegoogle-cloud-firestore

3

我看到这个问题是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 }

- Chris Pesar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dharmaraj · Accepted Answer

您没有将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('');
  };