Next.js 错误：无法读取未定义的属性（正在读取“集合”）

Question

我最近才开始 next.js。我想通过观看 youtube 教程创建一个 facebook 克隆，但它不断弹出错误无法读取未定义的属性（读取“集合”）。我做了 yarn add firebase，也将我的 firebase 版本更改为 firebase v8

这是我的 firebase.js

import "firebase/storage";
import firebase from "firebase/app";

const firebaseConfig = {
  apiKey: "my_key",
  authDomain: "my_domain",
  projectId: "my_id",
  storageBucket: "my_storage_bucket",
  messagingSenderId: "my_message_send",
  appId: "my_app_id"
};

const app = !firebase.apps.length ? firebase.initializeApp(firebaseConfig) : firebase.app() ;


const db = app.firestore();
const storage= firebase.storage();

export { db, storage }; 

输入框.js //这里出现错误

import Image from 'next/image';
import { useSession } from 'next-auth/client';
import { EmojiHappyIcon } from "@heroicons/react/outline";
import { CameraIcon,VideoCameraIcon } from "@heroicons/react/solid";
import{  useRef } from "react";
import { db } from "firebase/app";
import firebase from "firebase/app";
function InputBox() {
    const [session]=useSession();
    const inputRef=useRef(null);

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

    if(!inputRef.current.value) return;
//error
    db.collection("posts").add({
        message: inputRef.current.value,
        name: session.user.name,
        email: session.user.email,
        image: session.user.image,
        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
      });

      inputRef.current.value="";
    };


    return (
        
        <div className="bg-white rounded-2xl shadow-md mt-6 font-medium text-gray-500 p-2 " >
            <div className="flex space-x-4 p-4 items-center">
                <Image
                className="rounded-full"
                src={session.user.image}
                width={40}
                height={40}
                layout="fixed"
                />
                <form className=" flex flex-1">
                    <input
                    className="rounded-full h-12 bg-gray-100 flex-grow px-5
                    focus:outline-none"
                    type="text"
                    ref={inputRef}
                    placeholder={`Whats on Your mind ,${session.user.name}?`}
                    />
               
                <button  hidden type="submit" onClick={sendPost}
                >submit</button>
                </form>
                </div>
                <div className="flex justify-evenly p-3 border-t ">
                    <div className="inputIcon">
                        <VideoCameraIcon className="h-7 text-red-500"/>
                        <p className="text-xs sm:text-sm xl:text-base">Live Vedio</p>
                    </div>

                    <div className="inputIcon">
                        <CameraIcon className="h-7 text-green-400" />
                        <p className="text-xs sm:text-sm xl:text-base">Photo/Vedio</p>
                    </div>

                    <div className="inputIcon">
                        <EmojiHappyIcon className="h-7 text-yellow-300" />
                        <p className="text-xs sm:text-sm xl:text-base" > Feeling/Activity
                        </p>        
                    </div>
                </div>

           
        </div>
      )
    
}
export default InputBox

Answer 1

嗯，看来db 是undefined，为什么是undefined？这可能与如何访问或创建 firestore 有关。

我会改变

const db = app.firestore(); 到 const db = firebase.firestore();

您可能还想单独导入 firestore

import firebase from "firebase/app";

import "firebase/storage";

import "firebase/firestore";