动态导入Firebase RTDB时出现“Service not available”错误求助

错误原因 #

你遇到的Service database is not available错误，核心原因是Firebase核心模块（firebase/app）被重复打包：

• 主包中初始化的Firebase App，和动态分包（dynamic.min.js）中firebase/database依赖的firebase/app是两个独立的实例。
• 动态分包里的firebase/database会将服务注册到自己的核心实例容器中，而你传递给initDB的App属于主包的核心实例，导致主包容器找不到数据库服务的provider，触发报错。

从你贴出的getImmediate源码也能验证：当服务未在当前App实例的容器中注册，且optional为false时，就会抛出该错误。

优化方案 #

方案一：直接动态导入firebase/database（最简） #

无需额外封装分包，在用户登录后直接动态导入数据库模块，确保和主包的Firebase App共享同一核心实例：

// main.js
import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

const firebaseConfig = {
    // 你的Firebase配置
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

onAuthStateChanged(auth, async (user) => {
    if (user) {
        // 直接动态导入数据库模块
        const { getDatabase, ref, set } = await import('firebase/database');
        const db = getDatabase(app);
        
        // 示例：写入数据
        await set(ref(db, 'users/' + user.uid), {
            email: user.email
        });
    }
});

这种方式完全利用ES模块的动态导入特性，既实现了懒加载缩减初始包体积，又避免了重复打包问题。

方案二：配置打包工具共享Firebase核心模块 #

如果你需要保留分包结构，可通过打包工具（如Webpack/Vite）将firebase/app提取为公共chunk，确保主包和分包共享同一实例：

Webpack配置示例

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        firebaseCore: {
          test: /[\\/]firebase[\\/]app[\\/]/,
          name: 'firebase-core',
          priority: 10,
          enforce: true // 强制提取
        }
      }
    }
  }
};

Vite配置示例

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'firebase-core': ['firebase/app']
        }
      }
    }
  }
};

配置后，修改dynamic.js确保导入的firebase/database依赖公共的firebase-core chunk，再重新打包即可。

方案三：手动注册数据库服务（进阶） #

如果你需要更精细的控制，可以手动将数据库服务注册到主包的App实例中：

// dynamic.js
import { registerComponent } from 'firebase/app';
import { Database, name as databaseName } from 'firebase/database';
import { getDatabase } from 'firebase/database';

export function initDB(app) {
    // 手动注册数据库组件到传入的App实例
    registerComponent(app, databaseName, Database);
    return getDatabase(app);
}

不过这种方式不如前两种简洁，仅建议在特殊场景下使用。

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