Vue.js项目使用Firebase Storage时ref与getDownloadURL报错：不是函数

你当前的核心问题是混淆了Firebase Admin SDK和Web SDK的使用场景：

• 你导入的firebase-admin/storage是服务端（Node.js）专用的Admin SDK，而前端Vue项目应该使用Firebase Web SDK；
• 两者的API完全不同，所以会出现ref、getDownloadURL找不到的报错。

分场景修正方案 #

场景1：前端Vue项目中直接处理下载（推荐前端侧操作） #

1. 安装Firebase Web SDK（不要用firebase-admin）

npm install firebase

2. 初始化Firebase应用（在项目入口文件如main.js或单独的firebase.js中）

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "你的API密钥",
  authDomain: "你的Auth域名",
  projectId: "你的项目ID",
  storageBucket: "你的存储桶地址",
  messagingSenderId: "你的Sender ID",
  appId: "你的App ID"
};

const app = initializeApp(firebaseConfig);

3. 在Vue组件或工具函数中实现下载逻辑

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

async function downloadDocument(filePath) {
  const storage = getStorage();
  try {
    const url = await getDownloadURL(ref(storage, filePath));
    // 创建a标签触发下载
    const link = document.createElement('a');
    link.href = url;
    link.download = '文件名'; // 可选，指定下载后的文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } catch (err) {
    let errorMsg = '';
    switch (err.code) {
      case 'storage/object-not-found':
        errorMsg = '文件不存在';
        break;
      case 'storage/unauthorized':
        errorMsg = '无权限访问该文件';
        break;
      case 'storage/unknown':
        errorMsg = '未知错误，请检查服务器响应';
        break;
      default:
        errorMsg = err.message;
    }
    alert(errorMsg);
  }
}

场景2：后端Express接口中处理（用Admin SDK） #

如果你的index.js是Node.js后端服务，那么Admin SDK的API和Web SDK不同，修正如下：

1. 确保已初始化Firebase Admin

const admin = require('firebase-admin');
// 注意：需要从控制台下载服务账号密钥json，或者设置环境变量
admin.initializeApp({
  credential: admin.credential.applicationDefault(),
  storageBucket: "你的存储桶地址"
});

2. 修正路由逻辑（Admin SDK没有ref和getDownloadURL，需用bucket和getSignedUrl）

const storage = admin.storage();
const bucket = storage.bucket();

app.get('/downloadDocument', async (request, response) => {
  response.set('Access-Control-Allow-Origin', '*');
  const filePath = request.query.documentURL;

  try {
    // 生成带签名的临时下载URL（有效期可自定义）
    const [url] = await bucket.file(filePath).getSignedUrl({
      action: 'read',
      expires: new Date(Date.now() + 3600000) // 1小时有效期
    });
    // 返回URL给前端，由前端触发下载
    response.json({ downloadUrl: url });
  } catch (err) {
    let errorMsg = '未知错误';
    switch (err.code) {
      case 'storage/object-not-found':
        errorMsg = '文件不存在';
        break;
      case 'storage/unauthorized':
        errorMsg = '无权限访问该文件';
        break;
    }
    response.status(400).json({ error: errorMsg });
  }
});

额外注意点 #

• 后端代码中不要使用XMLHttpRequest，这是前端API，后端应直接生成URL返回给前端；
• 异步操作要使用async/await或正确处理Promise，避免response.send('done')提前执行；
• catch块中参数是err，不要写成error，否则会出现未定义错误。

内容的提问来源于stack exchange，提问作者Bruno Marques Reichert