SvelteKit表单提交后服务端request对象为空问题求助

核心问题原因 #

• use:enhance 与原生提交冲突：SvelteKit 的 use:enhance 会接管表单的默认提交逻辑，你直接调用 form.submit() 绕开了框架的增强处理，导致表单数据未能正确序列化传递到服务端，最终出现 event.request 为空的情况。
• 响应式更新异步延迟：Svelte 的变量更新是异步的，设置 departmentIdToDelete 后立刻提交表单，此时隐藏输入框的 DOM 值还未同步更新，提交的表单没有携带任何数据，服务端自然接收不到内容。

解决办法 #

1. 移除 use:enhance（无需表单增强时）

如果不需要 use:enhance 提供的渐进增强、错误捕获等功能，直接移除该指令，原生表单提交即可正常传递数据：

<form method="post">
    <input
        type="hidden"
        name="departmentIdToDelete"
        id="departmentIdToDelete"
        bind:value={departmentIdToDelete}
    />
</form>

2. 等待 DOM 更新后提交（保留 use:enhance）

借助 Svelte 的 tick() 函数等待响应式更新同步到 DOM 后再提交表单：
首先导入 tick：

import { tick } from 'svelte'

修改删除确认函数：

async function confirmDelete(id: number, title: string) {
    if (confirm(`Are you sure you want to delete the ${title} department`)) {
        departmentIdToDelete = id.toString()
        await tick() // 等待DOM完成更新
        const form = document.querySelector('form') as HTMLFormElement
        form.submit()
    }
}

3. 贴合 SvelteKit 规范的提交方式

利用 use:enhance 的原生提交触发逻辑，避免直接操作 DOM：

<script>
import { enhance } from '$app/forms'
let departmentIdToDelete: string | undefined = undefined

function confirmDelete(id: number, title: string) {
    if (confirm(`Are you sure you want to delete the ${title} department`)) {
        departmentIdToDelete = id.toString()
        // 触发表单的原生提交事件，让use:enhance处理
        document.querySelector('form')?.dispatchEvent(new Event('submit'))
    }
}
</script>

<form method="post" use:enhance>
    <input
        type="hidden"
        name="departmentIdToDelete"
        id="departmentIdToDelete"
        bind:value={departmentIdToDelete}
    />
</form>

额外提示：TypeScript 中建议使用小写的 number/string 类型（而非大写的 Number/String），这是更规范的写法。

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