类型错误：_fire__WEBPACK_IMPORTED_MODULE_11__.default.collection 不是 function

Question

I have a project where I'm using Firebase for the backend and ReactJS as the front end. I have successfully implemented the authentication and it's up and running but I can't seem to make my Firestore work. here is my fire.js file:

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;

and here is the file in which I'm trying to add a contact document and then add name, email and message as fields:

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

Your fire variable is the result of initializeApp , which is of type App. You need to call the firestore method to access the Firestore Service Interface :

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