SvelteKit Form Action返回success无效，前端form始终为null

问题描述 #

后端+page.server.js的createScore action能正常写入数据库，但前端+page.svelte始终无法通过form prop获取到成功返回值，控制台打印form为null，条件渲染的成功提示也不显示。

后端代码（+page.server.js） #

export const actions = {
    createScore: async ({ request }) => {
        const values = await request.formData();

        try {
            const instagram = values.get('username');
            const score = Number(values.get('score'));

            await prisma.score.create({
                data: {
                    score,
                    instagram
                }
            });

            return { success: true };
        } catch (err) {
            console.error(err);
            return fail(500, { message: 'Could not create the score.' });
        }
    }
};

前端代码（+page.svelte） #

<script>
    export let form;
    console.log(form);
</script>

{#if form?.success}
<p>It Worked</p>
{/if}

<form action="?/createScore" method="POST">
<input type="text" id="score" name="score" />
<input type="text" id="username" name="username" />
<button type="submit">Submit</button>
</form>

解决方案 #

你可以尝试以下几个排查/修复步骤：

• 导入fail函数：在+page.server.js顶部添加导入语句，即使catch块未触发，缺失导入可能导致内部处理异常：

  import { fail } from '@sveltejs/kit';
  

• 改用fail返回成功状态：虽然fail设计用于错误场景，但它能确保返回值被正确封装为form数据传递给前端，替换成功分支的返回代码：

  return fail(200, { success: true });
  

• 检查网络请求：打开浏览器开发者工具的网络面板，查看POST请求的响应，以及提交后页面刷新的GET请求，确认响应中是否包含form相关的flash数据。

• 更新SvelteKit版本：旧版本可能存在action返回值传递的bug，升级到最新稳定版可以解决这类问题。

• 排查表单提交拦截：确认页面中没有其他JavaScript代码阻止了表单的默认提交行为（比如preventDefault()），这会导致页面不刷新，form prop无法更新。

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