Vercel部署Sveltekit+Firebase认证后出现404错误求助

核心原因 #

你使用的Firebase JS SDK 9.0.1版本，在客户端初始化时默认会尝试从Firebase Hosting专属的/__/firebase/init.json路径加载配置。但你的应用部署在Vercel而非Firebase Hosting，这个路径不存在，触发404错误，导致客户端无法完成认证状态同步，最终登录后跳回登录页面。

具体解决方案 #

1. 显式传入客户端配置，禁用自动加载 #

在客户端初始化Firebase时，直接传入Firebase控制台生成的完整配置对象，不要依赖自动加载机制。示例代码：

import { initializeApp } from "firebase/app";

// 替换为你从Firebase控制台复制的客户端配置
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "my-firebase-project.firebaseapp.com",
  projectId: "my-firebase-project",
  storageBucket: "my-firebase-project.appspot.com",
  messagingSenderId: "你的SENDER_ID",
  appId: "你的APP_ID"
};

// 直接初始化应用，跳过自动配置加载
const app = initializeApp(firebaseConfig);

这样SDK就不会再请求init.json文件。

2. 升级Firebase SDK版本（可选优化） #

Firebase 9.x的早期版本（如9.0.1）对非Firebase Hosting环境的适配不完善，升级到较新的稳定版本（例如9.23.0及以上）可以避免这类默认行为问题。修改package.json中的依赖：

"firebase": "^9.23.0"

执行npm install完成升级。

3. 完善认证回调路由逻辑 #

确保Sveltekit中处理谷歌登录回调的路由（比如/auth/callback）正确获取并持久化认证状态：

import { getAuth, getRedirectResult } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    if (result.user) {
      // 登录成功后跳转到主页或目标页面
      window.location.href = "/";
    }
  })
  .catch((error) => {
    console.error("认证回调处理失败:", error);
  });

额外检查项 #

• 确认客户端配置中的authDomain与Firebase控制台完全一致，保证登录重定向能正确返回Vercel应用。
• 若使用环境变量管理Firebase配置，检查Vercel上的环境变量是否正确注入，无空值或错误。

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