Firebase 配置 2022

Question

我正在编写一个 FB 克隆教程。问题是我在 2022 年做，所以需要实施很多更新。我真的是 firebase 新手，所以我确实需要一些帮助。

我的 firebase.js

import firebase from 'firebase';
import 'firebase/storage';

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "AIzaSyDNCuXEn5todyFVWl6CLJaNridOkTxLi1o",
    authDomain: "fbclone-b8dca.firebaseapp.com",
    projectId: "fbclone-b8dca",
    storageBucket: "fbclone-b8dca.appspot.com",
    messagingSenderId: "366781998977",
    appId: "1:366781998977:web:84791acf7d270c5fdbaa80"
};

// // Initialize Firebase
// const app = initializeApp(firebaseConfig);

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

const db = app.firestore();

const storage = fireBase.storage();

export {db, storage}

我的 inputbox.js

import { useSession } from "next-auth/react"
import Image from "next/image"
import { CameraIcon, EmojiHappyIcon, VideoCameraIcon } from "@heroicons/react/solid";
import {useRef} from 'react'
import {db, storage} from '../fireBase';

const InputBox = () => {
    const {data: session} = useSession();
    const inputRef = useRef(null);

    const sendPost = (e) => {
        e.preventDefault();
        if (!inputRef.current.value) return;

        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 = ""
    }

这是我得到的错误：

./fireBase.js:1:0
Module not found: Package path . is not exported from package /home/alondrob/code/labs/projects/fbclone/node_modules/firebase (see exports field in /home/alondrob/code/labs/projects/fbclone/node_modules/firebase/package.json)
> 1 | import firebase from 'firebase';
  2 | import 'firebase/storage';
  3 | 
  4 | // Your web app's Firebase configuration

Import trace for requested module:
./components/InputBox.js
./components/Feed.js
./pages/index.js

https://nextjs.org/docs/messages/module-not-found

我知道导入语法已经改变，我尝试了一些类似的方法

// Initialize Cloud Firestore through Firebase
import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"
const firebaseApp = initializeApp({
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});

const db = getFirestore();

我只是不确定如何将它们全部配置在一起。

Answer 1

与其从过时的教程开始，不如考虑从 Firebase documentation 或 codelab 开始。它们完全与最新更改保持同步。

虽然最新的 SDK 可能有不同的语法，但旧的 SDK 仍然可以正常工作。因此，如果您使用过时的教程/资源，您始终可以使用该教程所基于的 SDK 版本。您也可以use the latest SDK in compat mode，按照升级指南中的说明进行操作。

Answer 2

您正在处理 firebase 版本 8 代码库并尝试在 inbox.js 组件中导入您的本地 firbase.js 组件

问题：您必须安装 firebase 而没有将版本指定为 version 8，，这意味着您安装了最新版本的 firebase，version 9 而不是版本 8。

因此，您必须重构 firebase.js 组件内的代码，如下所示。

 import { initializeApp, getApps, getApp } from "firebase/app";
    import { getFirestore } from "firebase/firestore";
    import { Storage } from "firebase-admin/lib/storage/storage";
    
    const firebaseConfig = {
      apiKey: "AIzaSyDNCuXEn5todyFVWl6CLJaNridOkTxLi1o",
      authDomain: "fbclone-b8dca.firebaseapp.com",
      projectId: "fbclone-b8dca",
      storageBucket: "fbclone-b8dca.appspot.com",
      messagingSenderId: "366781998977",
      appId: "1:366781998977:web:84791acf7d270c5fdbaa80"
    };
    
   
    const app = !getApps().length ? initializeApp(firebaseConfig) : 
    getApp();
    
    const db = getFirestore(app);
    
export default db;

虽然，上面的解决方案可以解决您的问题，但inputbox.js 会产生另外一个问题。 所以在 inputbox.js 组件代码中，重构你如何从 firebase follow this link 获取数据

重构这个

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(),
            })