React Native Expo使用图片选择器时无法从firebase/storage导入getStorage

问题根源 #

• Firebase版本不匹配：getStorage是Firebase v9及以上版本才提供的模块化API，如果你安装的是v8及更低版本的firebase包，firebase/storage路径下不会导出这个方法，自然会报undefined错误。
• API风格混用：你的代码同时使用了v9的模块化导入写法，和v8版本专属的firebase.storage().ref()命名空间写法，两种API风格完全不兼容，混用必然触发报错。
• 额外注意：你安装的@react-native-firebase系列依赖是给原生React Native项目使用的，如果你是开发Web项目或者Expo托管项目，这类依赖会和官方web版firebase包冲突，建议先卸载所有无关的Firebase相关依赖。

解决方案 #

方案1：使用v9及以上版本（官方推荐） #

首先确认你的package.json中firebase版本≥9.0.0，不符合的话先执行升级：
npm i firebase@latest
如果依赖安装异常，先清理缓存重装：

rm -rf node_modules package-lock.json yarn.lock
npm install

之后使用统一的模块化API写法：

import { initializeApp } from "firebase/app";
import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";

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

// 初始化Firebase实例
const app = initializeApp(firebaseConfig);
// 传入初始化完成的app实例获取storage对象，不要直接调用getStorage()
const storage = getStorage(app);

// 上传图片示例，file为你从图片选择器拿到的File/Blob对象
const uploadImage = async (file, filePath) => {
  const storageRef = ref(storage, filePath);
  await uploadBytes(storageRef, file);
  // 可获取上传后的访问地址
  const url = await getDownloadURL(storageRef);
  return url;
}

方案2：使用v8及更低版本 #

如果你不想升级版本，统一使用v8的命名空间风格API即可：

import firebase from "firebase/app";
import "firebase/storage";

firebase.initializeApp(firebaseConfig);
const storage = firebase.storage();

// 上传示例
const uploadImage = async (file, filePath) => {
  const storageRef = storage.ref(filePath);
  await storageRef.put(file);
  const url = await storageRef.getDownloadURL();
  return url;
}

替代方案（无需调用客户端storage API） #

你可以通过Firebase云函数生成签名上传URL，前端直接通过HTTP请求上传文件，完全绕开客户端Storage SDK的调用：

1. 编写Firebase云函数，内部通过admin SDK生成对应路径的签名上传URL，返回给前端
2. 前端拿到签名URL后，直接用fetch/axios将文件PUT到该地址即可完成上传
3. 上传完成后可自行触发后续业务逻辑

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