Firebase Storage文件上传报错：.put不是函数问题求助

你的代码报错是因为误用了Firebase v9+模块化API的语法，v9+采用函数式调用方式，不再支持旧版的链式方法（比如.put()），同时你后续对storageRef的调用也存在错误——它是一个存储引用对象，不是可调用的函数。

修正后的代码示例 #

首先确保你已经导入所需的Firebase核心函数：

import { ref, uploadBytes, getDownloadURL, getMetadata } from "firebase/storage";
import { collection, addDoc, serverTimestamp } from "firebase/firestore";

然后修改handleUpload函数：

const handleUpload = async () => {
  if (!file) return; // 先校验是否有选中文件
  setUploading(true);
  try {
    // 创建存储路径引用
    const storageRef = ref(storage, `files/${file.name}`);
    // 上传文件（用v9+的uploadBytes替代旧版.put）
    const snapshot = await uploadBytes(storageRef, file);
    
    // 获取文件下载链接和元数据
    const fileUrl = await getDownloadURL(storageRef);
    const meta = await getMetadata(storageRef);
    
    // 将文件信息写入Firestore
    await addDoc(collection(db, "myFiles"), {
      timestamp: serverTimestamp(),
      caption: file.name,
      fileUrl,
      size: snapshot.bytesTransferred,
    });
    
    console.log("上传完成", snapshot, meta);
    // 重置页面状态
    setUploading(false);
    setOpen(false);
    setFile(null);
  } catch (error) {
    console.error("上传失败", error);
    setUploading(false);
    // 这里可以添加用户可见的错误提示
  }
};

关键改动说明 #

• 替换.put(file)为uploadBytes(storageRef, file)：v9+中put被拆分为独立的uploadBytes函数，需传入存储引用和文件对象
• 移除错误的storageRef("files")调用：storageRef是ref()创建的引用对象，不能当作函数调用，直接用它调用getDownloadURL和getMetadata即可
• 用async/await替代嵌套then：让异步逻辑更清晰易读，同时增加try/catch捕获错误，避免上传失败时页面状态卡死

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