类型错误：_fire__WEBPACK_IMPORTED_MODULE_11__.default.collection 不是函数

Question

我有一个项目，我使用 Firebase 作为后端，使用 ReactJS 作为前端。我已经成功实现了身份验证，它已经启动并运行，但我似乎无法让我的 Firestore 工作。这是我的fire.js 文件：

import firebase from 'firebase';
import "firebase/auth";
import "firebase/firestore";

if (!firebase.apps.length) {
    var fire = firebase.initializeApp({
   
      // my credentials //
    });
  
 }else {
   fire = firebase.app(); // if already initialized, use that one
 }
//const fire = firebase.initializeApp(firebaseConfig);
export default fire;

这是我尝试在其中添加 联系人 文档，然后将姓名、电子邮件和消息添加为字段的文件：

import { BrowserRouter as Router, Route, Link} from "react-router-dom";
//import AddRecord from './AddRecord';
import * as FaIcons from "react-icons/fa";
import * as AiIcons from "react-icons/ai";
import { SidebarData } from './SidebarData';
//import { AddRecord } from './components/AddRecord';
import { IconContext } from 'react-icons';
import Button from 'react-bootstrap/Button';

import fire from "../fire";


const ContactUs = () => {

    const [sidebar, setSidebar] = useState (false)

    const showSidebar = () => setSidebar(!sidebar)
    //const Hero handleLogout={handleLogout};

    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [message, setMessage] = useState("");

const handleSubmit = (e) => {
    e.preventDefault();

    fire.collection('contact').add({
        name: name,
        email: email,
        message: message,
    })
    .then(() => {
        alert("Thanks! We'll get back to you soon!");
    })
    .catch(error => {
        alert(error.message);
    })
    setName("");
    setEmail("");
    setMessage("");
};

    return (
        <div>
            <img src={croppped} className="mister" /> 
            <IconContext.Provider value ={{color: '3e9e91'}}>            
            <div className="navbar">
             <Link to ="#" className="menu-bars">   
                 <FaIcons.FaBars onClick={showSidebar} />
             </Link>  
            </div>
            <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
                <ul className="nav-menu-items" onClick={showSidebar}>
                    <li className="navbar-toggle">
                        <Link to ="#" className="menu-bars">   
                        <AiIcons.AiOutlineClose/>
                        </Link>  
                    </li>
                    {SidebarData.map((item, index) => {
                        return (
                            <li key={index} className={item.cName}>
                                <Link to={item.path}>
                                    {item.icon}
                                    <span>{item.title}</span>
                                </Link>
                            </li>
                        )
                    })}
                </ul>
            </nav>
            </IconContext.Provider>
            
        <form className="form" onSubmit = {handleSubmit}>
            <h1>Stuck Somewhere? Contact Us!</h1>
             <input 
            placeholder="Enter Full Name"
            value={name}
            onChange={(e) => setName(e.target.value)} 
            />
                    
            <input placeholder="Enter Email"
            value={email}
            onChange={(e) => setEmail(e.target.value)} 
            />

            
            <textarea placeholder="Enter Message"
            value={message}
            onChange={(e) => setMessage(e.target.value)}>
            </textarea>

                    <button type="submit">Submit</button>
        </form>
        </div>
    )
}

export default ContactUs;

Answer 1

您的fire 变量是initializeApp 的结果，它是App 类型。需要调用firestore方法才能访问Firestore Service Interface：

fire.firestore().collection('contact')...