NextJS+Firebase部署报错：firebase.database()不是函数

问题根源 #

你使用了Firebase的兼容版（firebase/compat/app）但未正确引入实时数据库的兼容模块，导致database()方法无法被识别。Firebase v9+采用模块化架构，兼容版需要手动导入对应功能模块才能使用。

解决方案步骤 #

1. 安装必需的Firebase依赖 #

确保安装实时数据库的兼容包：

npm install firebase @firebase/database-compat

或使用yarn：

yarn add firebase @firebase/database-compat

2. 修正Firebase初始化文件（initFirebase.tsx） #

必须导入兼容版的实时数据库模块，并完成应用初始化：

// initFirebase.tsx
import firebase from 'firebase/compat/app';
import 'firebase/compat/database'; // 关键：导入实时数据库兼容模块

// 替换为你的Firebase项目配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 避免重复初始化应用
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export default firebase;

3. 修正LoadData组件代码 #

使用初始化好的Firebase实例调用数据库方法，同时实现读写示例：

// app/components/loadData.tsx
import firebase from '../initFirebase';

export default function LoadData() {
  // 读取实时数据库数据
  const fetchData = async () => {
    const dbRef = firebase.database().ref('your/data/path');
    const snapshot = await dbRef.get();
    snapshot.exists() ? console.log(snapshot.val()) : console.log('无数据');
  };

  // 写入实时数据库数据
  const writeData = async () => {
    const dbRef = firebase.database().ref('your/data/path');
    await dbRef.set({
      content: '测试内容',
      createdAt: Date.now()
    });
  };

  return (
    <div>
      <button onClick={fetchData}>读取数据</button>
      <button onClick={writeData}>写入数据</button>
    </div>
  );
}

4. 重新部署 #

先本地运行npm run dev验证功能正常，再执行部署命令：

firebase deploy

注意事项 #

• 不要混用Firebase模块化语法（如import { getDatabase } from 'firebase/database'）和兼容版语法，保持风格一致
• 确保Firebase控制台已启用实时数据库，且databaseURL与控制台配置一致
• 开发阶段可临时设置数据库安全规则为全开放（{ "rules": { ".read": true, ".write": true } }），上线后需替换为安全的权限规则

内容的提问来源于stack exchange，提问作者Michel