SvelteKit开发Todo应用遇Firebase初始化错误求助

1. 解决Firebase未初始化错误 #

Firebase报错的核心是在SSR（服务端渲染）阶段或未正确判断环境时调用了Firebase API，且存在重复初始化风险。按以下步骤修正：

• 创建Firebase工具文件 src/lib/firebase.js，统一管理初始化逻辑：

import { initializeApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 替换为你的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的SENDER_ID",
  appId: "你的APP_ID"
};

// 避免重复初始化应用
const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
export const db = getFirestore(app);

• 在页面组件（如+page.svelte）中，仅在客户端环境执行Firebase操作：

<script>
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';
  import { db } from '$lib/firebase';
  import { collection, getDocs } from 'firebase/firestore';

  let todos = [];

  onMount(async () => {
    // 确保仅在浏览器环境调用Firebase
    if (!browser) return;

    try {
      const todoCollection = collection(db, 'todos');
      const snapshot = await getDocs(todoCollection);
      todos = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    } catch (err) {
      console.error('加载待办事项失败:', err);
    }
  });
</script>

<!-- 页面渲染内容 -->
<div>
  {#each todos as todo}
    <p>{todo.text}</p>
  {/each}
</div>

2. 解决<+page>组件不可恢复的HMR错误 #

HMR错误通常是组件在SSR阶段执行了客户端专属代码导致的，解决Firebase初始化问题后，该错误会同步修复。额外注意：

• 所有涉及浏览器API或Firebase的操作，必须用browser变量或onMount钩子包裹，避免服务端渲染时执行。
• 给异步操作添加try/catch捕获错误，防止未处理的异常导致HMR崩溃。
• 确保VSCode中安装了Svelte官方插件，避免语法或逻辑问题未被提前检测。

内容的提问来源于stack exchange，提问作者Nibbles The-Woozle