SvelteKit SSG模式下superForm的data.form报TypeScript错误

问题原因 #

TypeScript报错是因为PageData默认类型为空对象{}，未定义form属性，而你在superForm(data.form)中尝试访问该属性。同时你的Zod校验规则里id设为必填，但实际添加电脑时id由数据库自动生成，存在逻辑矛盾。

解决步骤 #

1. 调整Zod校验规则 #

由于添加电脑时id由Dexie自动生成（++id），无需用户输入，修改Zod schema移除id的必填限制：

const computerSchema = z.object({
  id: z.number().int().positive().optional(), // 设为可选
  name: z.string().min(2)
});

// 更合理的做法：直接移除id字段，提交时无需传入
const computerSchema = z.object({
  name: z.string().min(2)
});

2. 为PageData补充类型与初始数据 #

创建src/routes/computers/add/+page.ts，返回初始表单数据，让SvelteKit自动生成正确的PageData类型：

import type { PageLoad } from './$types';
import type { Computer } from '$lib/db';

export const load: PageLoad = async () => {
  return {
    form: {
      name: ''
    } satisfies Omit<Computer, 'id'>
  };
};

若不想创建+page.ts，也可在+page.svelte中手动声明data类型：

// 替换原有的export let data: PageData;
export let data: { form: Omit<Computer, 'id'> };

3. 适配数据库提交逻辑 #

修改addComputer函数，只传入数据库需要的字段：

async function addComputer(comp: Omit<Computer, 'id'>): Promise<void> {
  await db.computers.add(comp);
}

完成以上修改后，TypeScript会识别data.form的正确类型，错误提示将消失，同时表单逻辑也更符合数据库自动生成id的规则。

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