Next.js应用上传图片至Firebase Storage遇404错误求助

你遇到的问题是Next.js向Firebase Storage上传图片时，流程逻辑走通但返回404 Not Found，结合你提供的代码和配置，可从以下几个方向排查：

1. 验证环境变量的准确性 #

• 确认NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET的值与Firebase控制台中存储桶的完整名称完全一致（格式通常是[项目ID].appspot.com）
• 在组件中临时打印process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET，检查变量是否正确加载——Next.js的环境变量如果拼写错误、.env文件未放在根目录，或者没有以NEXT_PUBLIC_前缀开头（前端组件使用的变量必须加这个前缀），都会导致值为空或错误。

2. 显式指定存储桶/区域 #

如果你的存储桶不在Firebase默认区域（us-central1），SDK可能会请求错误的端点导致404。修改firebase.ts，显式指定存储桶：

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

export const app = initializeApp(firebaseConfig);
// 显式传入存储桶地址，避免区域不匹配
export const storage = getStorage(app, `gs://${process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET}`);

3. 确认上传的文件对象合法 #

检查selectedImage是否为标准的浏览器File对象：

• 在handleUpload中打印selectedImage，确认它包含name、size、type等属性，避免上传的是base64字符串、自定义对象这类非标准格式。

4. 更新Firebase SDK版本 #

旧版本的firebase/storage SDK可能存在兼容性问题，执行以下命令更新到最新稳定版：

npm update firebase
# 或 yarn 用户执行
yarn upgrade firebase

5. 检查存储桶CORS配置（可选） #

虽然404更多是路径/桶的问题，但如果CORS配置异常也可能间接导致请求失败。可以用gsutil工具配置CORS：

1. 创建cors.json文件：

[
  {
    "origin": ["*"],
    "method": ["GET", "POST", "PUT"],
    "maxAgeSeconds": 3600
  }
]

2. 执行命令应用配置：

gsutil cors set cors.json gs://你的存储桶名称

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