未捕获的类型错误：无法读取未定义的属性“initializeApp”

Question

我正在尝试在我的 Vue 项目中使用一些 Firebase 库（我使用 安装了它npm install firebase）。

我在main.js：

import { Firebase } from 'firebase/app'
import 'firebase/analytics'
import 'firebase/auth'
import 'firebase/messaging'

Firebase.initializeApp({
  apiKey: 'xxx',
  authDomain: 'xxx',
  databaseURL: 'xxx',
  projectId: 'xxx',
  storageBucket: 'xxx',
  messagingSenderId: 'xxx',
  appId: 'xxx',
  measurementId: 'xxx'
})

我得到：

未捕获的类型错误：无法读取未定义的属性“initializeApp”

Answer 1

对于使用最新Firebase Modular API (v9) 的新手，需要进行重构。

导入必须更改为：

import { FirebaseApp, initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getDatabase } from "firebase/database";

const firebaseConfig = {...}

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

const db = getDatabase(app);

const auth = getAuth(app);

关于这种新的重构风格在这里

有关读取和写入数据如何更改的更多信息，请参见此处

Answer 2

改变这个：

import { Firebase } from 'firebase/app'

进入这个：

import * as firebase from "firebase/app";

导入所有内容，firebase/app然后执行：

firebase.initializeApp({
  apiKey: 'xxx',
  authDomain: 'xxx',
  databaseURL: 'xxx',
  projectId: 'xxx',
  storageBucket: 'xxx',
  messagingSenderId: 'xxx',
  appId: 'xxx',
  measurementId: 'xxx'
})