Next JS调用firebase.storage报is not a function错误求助

报错根本原因 #

你当前安装的Firebase为v9及以上版本，该版本默认采用轻量化模块化API设计，废弃了旧版的命名空间调用方式，因此你沿用的v8版本写法会触发storage is not a function报错。

解决方案 #

方案1：保留原有写法（快速兼容） #

将导入语句替换为Firebase官方提供的兼容包写法，不需要调整其他业务逻辑：

// 替换原有导入语句
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';

同时注意要先执行初始化逻辑再获取实例，调整导出部分代码：

// 先执行初始化
initFirebase()

const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();

export { projectFirestore, projectStorage };

方案2：使用新版模块化API（官方推荐，打包体积更小） #

完全适配v9+版本的API规范，重构相关代码：

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

const clienteCredentials = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};

// 初始化应用
const app = initializeApp(clienteCredentials);

// 获取服务实例
const projectFirestore = getFirestore(app);
const projectStorage = getStorage(app);

export { projectFirestore, projectStorage };

使用该方案不需要单独封装initFirebase函数，初始化逻辑直接执行即可。

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