使用Expo和React Native上传图片至Firebase Storage v9.xx时ref未定义报错

问题根源 #

你代码里的核心问题是变量名冲突：从firebase/storage导入的ref是创建存储引用的函数，但你在pickImage函数内部重新声明了同名变量ref，导致导入的ref函数被覆盖。此时调用ref(storage, "image.jpg")时，实际是试图调用一个存储引用对象（而非函数），所以会抛出TypeError: _ref2 is not a function这类错误，同时IDE里导入的ref会因为未被实际使用而灰显。

修复步骤 #

1. 重命名冲突变量：把内部声明的存储引用变量改成其他名称，比如storageRef，避免和导入的ref函数重名。
2. 补全ImagePicker导入：你的代码里使用了ImagePicker但未写导入，需补充从Expo的image-picker库导入。
3. 添加错误捕获：异步操作（fetch、uploadBytes）需要用try/catch包裹，避免未处理的Promise拒绝错误。
4. 修复语法错误：原代码中ImagePicker.launchImageLibraryAsync的配置对象里，mediaTypes行末尾缺少逗号，会导致语法错误。

修改后的完整代码 #

import { getStorage, ref, uploadBytes } from "firebase/storage";
import React, { useState } from 'react';
// 补充ImagePicker导入
import * as ImagePicker from 'expo-image-picker';

const [image, setImage] = useState(null);
const [uploading, setUploading] = useState(false);

const pickImage = async () => {
  try {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [9, 16],
      quality: 1,
    });

    console.log(result);

    if (!result.canceled) {
      setImage(result.assets[0].uri);

      const storage = getStorage();
      // 重命名变量，避免和导入的ref函数冲突
      const storageRef = ref(storage, "image.jpg");

      const img = await fetch(result.assets[0].uri);
      const bytes = await img.blob();

      await uploadBytes(storageRef, bytes);
      console.log("图片上传成功");
    }
  } catch (error) {
    console.error("上传失败:", error);
    // 可在此添加用户提示，比如Toast组件提示上传失败
  }
};

额外注意点 #

• 确保你的Firebase项目已正确初始化，getStorage()会自动使用初始化的Firebase配置；若需指定存储桶，可传入参数getStorage(app, 'your-bucket-url')。
• 若需要生成可访问的图片链接，可在uploadBytes成功后调用getDownloadURL(storageRef)获取。

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