SvelteKit如何停止页面渲染？数据为空时重定向失效问题

核心问题 #

你的代码存在两个关键问题：

1. 服务器端重定向逻辑未正确触发，导致空/无效数据流入客户端
2. 客户端未做防御性处理，直接访问不存在的属性引发500内部错误

问题原因拆解 #

1. 重定向失效：if (res.data)的判断逻辑不严谨。JavaScript中空对象{}、空数组[]会被判定为true，如果getData返回的res.data是这类空结构，代码会跳过重定向直接返回数据。另外需确认是否已正确导入SvelteKit的redirect函数。
2. 客户端报错：当服务器返回{ data: [] }（catch分支）或无detail属性的响应时，data.detail为undefined，调用replaceNewline或访问product.detail都会抛出错误。

修复代码 #

1. 修正page.server.ts

import { redirect } from '@sveltejs/kit'; // 必须导入redirect函数

export const load: PageServerLoad = async (event: any) => {
    const token = event.locals.token;
    try {
        const res = await getData(
            `${api.getProductByIdentifier}/${event.params.id}`,
            '',
            false,
        );
        // 更严谨的判断：确保数据存在且包含有效详情
        if (res.data?.detail) {
            return res;
        } else {
            redirect(302, '/contact');
        }
    } catch (error) {
        // 捕获错误时直接重定向，避免返回无效数据
        redirect(302, '/contact');
        // 可选：添加错误日志便于排查
        // console.error('产品数据获取失败:', error);
    }
};

2. 修正+page.ts（增加防御性处理）

<script lang="ts">
    export let data: any;
    // 先判断数据有效性，再处理换行符
    let product = data?.detail ? replaceNewline(data.detail) : { detail: '' };
</script>

<div class="bg-white">
    <!-- 条件渲染避免空值展示 -->
    {#if product.detail}
        {product.detail}
    {:else}
        <p>暂无产品信息</p>
    {/if}
</div>

修复说明 #

• 服务器端：通过res.data?.detail确保返回的是包含有效详情的数据，捕获错误时直接重定向，彻底阻断无效数据流入客户端。
• 客户端：使用可选链?.和条件渲染，即使服务器意外返回空数据，也不会触发500错误，而是友好展示提示内容。

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