Firebase图片上传报错：ReferenceError: Can't find variable: FirebaseStorage

这个错误的根源是你混淆了Firebase原生SDK和JS SDK的使用方式，再加上缺少必要的模块导入，咱们一步步拆解来看：

核心错误点 #

1. 未导入Firebase Storage模块 #

你只导入了@firebase/app基础模块，但Storage是Firebase的独立功能模块，必须单独导入才能使用。不管是在Photo组件还是App入口文件里，都需要添加：

import '@firebase/storage'

2. 错误的Storage实例调用方式 #

你写的FirebaseStorage.getInstance()是Android原生SDK的写法，而React Native用的是Firebase JS SDK，正确获取Storage实例的方式应该是通过导入的firebase对象：

const storage = firebase.storage(); // JS SDK的正确调用

3. React Native文件路径处理错误 #

Uri.fromFile(File("images/image1.png"))是Java/Kotlin的原生代码写法，完全不适用于React Native。在RN中处理本地文件，你需要：

• 用require('./images/image1.png')引用本地资源（如果是项目内的图片）
• 或者使用react-native-image-picker这类库获取用户选择的文件Uri
• 上传时需要把文件转换为Blob格式（JS SDK不支持直接上传本地文件路径）

4. 代码逻辑位置错误+变量未声明 #

• 你把上传逻辑直接写在render方法里，这会导致组件每次渲染都执行上传，严重浪费资源，应该放在componentDidMount或者点击事件回调里
• uploadTask = photoStored.putFile(file)里的uploadTask没有用let/const声明，会变成全局变量，而且putFile是原生SDK方法，JS SDK对应的是put()或putString()

修正后的示例代码 #

import React from 'react';
import { View, Text } from 'react-native';
import firebase from '@firebase/app';
import '@firebase/storage'; // 必须导入Storage模块

export default class Photo extends React.Component {
  async componentDidMount() {
    // 在组件挂载后执行上传逻辑，避免重复执行
    await this.uploadImage();
  }

  async uploadImage() {
    try {
      // 1. 获取Storage实例
      const storage = firebase.storage();
      const storageRef = storage.ref();

      // 2. 处理本地文件（示例用项目内图片，实际可替换为用户选择的文件Uri）
      const fileUri = require('./images/image1.png');
      const response = await fetch(fileUri);
      const blob = await response.blob(); // 转换为Blob格式

      // 3. 创建存储引用并上传
      const photoRef = storageRef.child('images/image1.png');
      const uploadTask = photoRef.put(blob);

      // 4. 监听上传状态
      uploadTask.on('state_changed', 
        (snapshot) => {
          const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          console.log(`上传进度：${progress}%`);
        }, 
        (error) => {
          console.error('上传失败：', error);
        }, 
        () => {
          // 上传完成后获取下载链接
          uploadTask.snapshot.ref.getDownloadURL().then((url) => {
            console.log('图片下载链接：', url);
          });
        }
      );
    } catch (err) {
      console.error('处理上传时出错：', err);
    }
  }

  render() {
    return (
      <View>
        <Text>Hello</Text>
      </View>
    );
  }
}

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