Vue3搭配Firebase使用时出现firebase.database is not a function报错无法发送数据如何解决

架构老林

2026-10-1

报错根因

你遇到的firebase.database is not a function报错基本都是由Firebase SDK版本语法不匹配导致的：目前主流使用的Firebase 9及以上版本改用了模块化API，你当前写的是v8及更早版本的命名空间式调用语法，二者不兼容。

解决方案

方案1：适配v9+模块化API（官方推荐）

第一步：修改`./db.js`配置文件

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

// 替换为你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的项目apiKey",
  authDomain: "你的项目authDomain",
  databaseURL: "你的项目databaseURL",
  projectId: "你的项目projectId",
  storageBucket: "你的项目storageBucket",
  messagingSenderId: "你的项目messagingSenderId",
  appId: "你的项目appId"
};

const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
export default db;

第二步：修改组件调用代码

import db from './db';
// 导入Realtime Database对应的操作方法
import { ref, push } from "firebase/database";

export default {
  name: 'App',
  methods:{
    incrementNum(){
      const numRef = ref(db, "messages")
      push(numRef, 'hi');
      console.log('sent it')
    },
  },
}

方案2：兼容旧版v8语法

如果不想修改现有业务代码，可以导入Firebase的兼容包实现向下兼容：

第一步：调整`./db.js`配置文件

import firebase from 'firebase/compat/app';
import 'firebase/compat/database';

// 替换为你自己的Firebase项目配置
const firebaseConfig = {
  // 填写你的项目配置
};
firebase.initializeApp(firebaseConfig);
const db = firebase;
export default db;