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

Posted 2023-02-22

【中文标题】未捕获的类型错误：无法读取未定义的属性“initializeApp”

【英文标题】：Uncaught TypeError: Cannot read property 'initializeApp' of undefined

【发布时间】：2020-03-21 19:53:22

【问题描述】：

我正在尝试在我的 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'
)

我得到：

【参考方案1】：

改变这个：

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'
)

【参考方案2】：

对于使用最新 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);

关于这种新的重构风格here

以及有关读取和写入数据如何更改的更多信息here