ReactJS向Firebase v9 Storage上传图片报storage.ref不是函数求助

算力阿峰

2026-9-25

解决方案

错误原因

你当前使用的是Firebase v9版本的模块化API，而业务代码中调用Storage的语法是v8版本的链式命名空间写法，两者不兼容，因此触发storage.ref is not a function报错。

具体修改步骤

1. 新增v9 Storage API导入

修改业务代码的导入部分，引入所需的Storage方法：

import React, { useState } from "react";
// 新增导入v9 Storage相关API
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import { storage } from "../../firebase/firebase";
import { ActionBtn, Topbar, SubjectHead, CardList } from "../../components/styles";

2. 重写uploadFiles上传逻辑

将原有的v8链式写法替换为v9模块化写法：

const uploadFiles = () => {
  // 等价于v8的storage.ref(`images/${img.name}`)
  const storageRef = ref(storage, `images/${img.name}`);
  // 等价于v8的.put(img)，创建支持断点续传的上传任务
  const uploadTask = uploadBytesResumable(storageRef, img);

  uploadTask.on(
    "state_changed",
    (snapshot) => {
      const prog = Math.round(
        (snapshot.bytesTransferred / snapshot.totalBytes) * 100
      );
      setProgress(prog);
    },
    (error) => console.log(error),
    () => {
      // 上传完成后获取文件访问链接
      getDownloadURL(uploadTask.snapshot.ref)
        .then((url) => {
          console.log(url);
          // 后续将url存入数据库等业务逻辑可在此处实现
        });
    }
  );
};