React Native+Firebase图片上传报错：_ref3未定义问题求助

问题描述 #

我是React Native和Firebase图片上传的新手，尝试将从相册选择的图片上传至Firebase Storage。获取ImagePicker的result.uri并存储时持续报错，怀疑是否在firebase config.js中的调用方式有误。

依赖版本 #

{
  "dependencies": {
...
    "expo": "~46.0.16",
    "firebase": "^9.13.0",
    "react": "18.0.0",
    "react-native": "0.69.6"
}

App.js代码 #

...
export default function App() {

  useEffect(() => {
      getPermission();
  },[]);

  const getPermission = async () => {
    if(Platform.OS !== 'web'){
      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
      if(status !== 'granted'){
        alert('Sorry, we need camera roll permissions to make this work!');
      }
    }
  }

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

    if(!result.cancelled){
       //the storage itself
    const storage = getStorage();

    const ref = ref(storage, `images/${result.uri}`)

    await uploadBytes(ref, result).then( (snapshot) => {
      alert('hello there')
    }).catch((error)=> {
      alert('error')
    });
  
    }

  }catch(error){
    alert(error.message)
  }
  }


  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={pickImage}>
      <Text>Select An Image</Text>
      </TouchableOpacity>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

报错信息（翻译后） #

_ref3 is not a function. (In '_ref3(storage, "images/" + result.uri)', '_ref3' is undefined)
翻译：_ref3 不是一个函数。（在 '_ref3(storage, "images/" + result.uri)' 中，'_ref3' 未定义）

问题原因及修复步骤 #

1. Firebase 9+ 模块化导入错误 #

报错中的_ref3实际是代码里的ref函数，因未从Firebase Storage正确导入导致未定义。Firebase 9采用模块化API，必须显式导入所需方法。

• 修复：在App.js顶部添加正确的导入语句：

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

2. 上传内容错误：直接传递result对象而非文件 #

uploadBytes要求第二个参数为Blob或File对象，但你直接传入了ImagePicker返回的result对象，会导致上传失败。在Expo环境中需将本地URI转换为Blob。

• 修复：添加URI转Blob函数，修改pickImage逻辑：

const uriToBlob = async (uri) => {
  const response = await fetch(uri);
  const blob = await response.blob();
  return blob;
};

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

    if(!result.cancelled){
      const storage = getStorage();
      // 用图片名称而非完整URI作为存储路径，避免路径混乱
      const imageName = result.uri.split('/').pop();
      const storageRef = ref(storage, `images/${imageName}`);
      
      const blob = await uriToBlob(result.uri);
      
      await uploadBytes(storageRef, blob).then( (snapshot) => {
        alert('图片上传成功');
      }).catch((error)=> {
        alert(`上传失败：${error.message}`);
      });
    }
  }catch(error){
    alert(`错误：${error.message}`);
  }
}

3. 检查Firebase配置初始化 #

确保你的firebase config.js已正确初始化Firebase应用：

import { initializeApp } from "firebase/app";

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

const app = initializeApp(firebaseConfig);
export default app;

并在App.js顶部引入该配置文件（如import './firebase config.js'），getStorage()会自动使用已初始化的应用。

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