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 文档 或 代码实验室。他们完全了解最新的变化。

虽然最新的 SDK 可能具有不同的语法，但旧的 SDK 仍然可以正常工作。因此，如果您使用过时的教程/资源，您始终可以使用该教程所基于的 SDK 版本。您还可以在兼容模式下使用最新的 SDK，具体方法如下：升级指南中的说明。

Answer 2

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

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

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

 import { initializeApp, getApps, getApp } from "firebase/app";
    import { getFirestore } from "firebase/firestore";
    import { getStorage } from "firebase/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);
    const storage = getStorage(app);
    
export default {db, storage};

尽管上述解决方案可以解决您的问题，但 inputbox.js 还会产生另一个问题。
因此，在 inputbox.js 组件代码中，重构如何从 firebase 获取数据 点击此链接进行

重构

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