Firebase Storage运行时报storage.ref is not a function错误求助

架构老林

2026-9-26

问题原因

你使用的是 Firebase 9+ 模块化版本SDK，该版本已经废弃了Web Version 8 中storage.ref()这类链式调用的API，所有存储相关操作都需要调用独立导入的工具函数实现。

解决方案

步骤1：导入所需的存储工具函数

在你编写上传函数的组件文件中，补充导入firebase/storage的相关方法：

import {storage} from "../../firebase";
// 新增导入以下方法
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

步骤2：修改上传函数的API调用

将原来的旧版本写法替换为模块化版本的调用逻辑，完整修改后的上传函数如下：

const upload = (items) => {
  items.forEach((item) => {
    const fileName = new Date().getTime() + item.label + item.file.name;
    // 替换原来的storage.ref写法，用独立的ref函数创建存储引用
    const storageRef = ref(storage, `/items/${fileName}`);
    // 替换原来的.put方法，用uploadBytesResumable创建可监听进度的上传任务
    const uploadTask = uploadBytesResumable(storageRef, item.file);
    uploadTask.on(
      "state_changed",
      (snapshot) => {
        const progress =
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log("Upload is " + progress + "% done");
      },
      (error) => {
        console.log(error);
      },
      () => {
        // 替换原来的ref.getDownloadURL链式调用，用独立的getDownloadURL函数
        getDownloadURL(uploadTask.snapshot.ref).then((url) => {
          setMovie((prev) => {
            return { ...prev, [item.label]: url };
          });
          setUploaded((prev) => prev + 1);
        });
      }
    );
  });
};