我的 Nextjs 项目上的 firebase 集成出错答案

【问题标题】：Error with firebase integration on my Nextjs project我的 Nextjs 项目上的 firebase 集成出错
【发布时间】：2023-01-07 02:38:02
【问题描述】：

我最近尝试在我的 Nextjs 项目中实施 firebase CLI，不仅将其托管在 firebase 服务器上，而且还可以访问 auth 和 Firestore 等 firebase 工具。我尝试设置我的 firebase 并注意到我无法使用 auth 和 Firestore 功能，尽管已导入。

我尝试的是以下内容：

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

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const firestore = firebase.firestore();

export default { firebase, auth, firestore };

结果是：

info  - Loaded env from /Users/basil/Documents/GitHub/Hustle/.env.local
info  - Linting and checking validity of types .Failed to compile.

./firebase/clientApp.ts:18:23
Type error: Property 'auth' does not exist on type 'typeof             import("/Users/usr/Documents/GitHub/Hustle/node_modules/firebase/app/dist/app/index")'.

  16 | 
  17 | firebase.initializeApp(firebaseConfig);
> 18 | const auth = firebase.auth();
     |                       ^
  19 | const firestore = firebase.firestore();
  20 | 
  21 | export default { firebase, auth, firestore };

【问题讨论】：

使用哪个版本的 firebase js？如果版本是 v9+ - 那么你需要 migrate 你的 v8 代码。

标签： reactjs firebase next.js firebase-tools

【解决方案1】：

不要从“firebase/app”导入 firebase，而是尝试从“firebase”导入 firebase。以下面给出的代码为例 -

import firebase from 'firebase'
import 'firebase/firestore'

const firebaseConfig = {
    // config
};

const firebaseApp  = firebase.initializeApp(firebaseConfig);
const firestore     = firebaseApp.firestore();
const auth         = firebaseApp.auth();
const provider = new firebase.auth.GoogleAuthProvider();


export {auth, provider};
export default database;

【讨论】：