SvelteKit 跳转slug页面内容不更新，响应式处理无效求助

核心问题分析 #

你的场景中，+page.server.ts的load函数已正确返回新数据，父组件的console.log也能打印新内容，但Editor组件未更新，本质是基于Tiptap的Editor组件仅在初始化时加载内容，没有监听传入的content props变化。

具体解决思路 #

1. 在Editor组件内部监听content变化并同步到编辑器

Tiptap编辑器默认只会在初始化时读取content，后续props更新不会自动同步。需要在Editor组件中添加响应式语句，监听content变化并调用编辑器API更新内容：

<!-- $lib/editor/index.svelte -->
<script>
  import { onMount } from 'svelte';
  import { Editor, EditorContent } from '@tiptap/svelte';
  import StarterKit from '@tiptap/starter-kit';

  export let content;
  let editor;

  onMount(() => {
    editor = new Editor({
      extensions: [StarterKit],
      content: content,
    });

    return () => editor.destroy();
  });

  // 关键：监听content变化，同步到编辑器实例
  $: if (editor && content) {
    // 第二个参数设为false可保留编辑历史，根据需求调整
    editor.commands.setContent(content, false);
  }
</script>

<EditorContent {editor} />

2. 简化父组件传递逻辑（可选）

父组件中的中间变量content并非必需，可直接将data.page.text传递给Editor，减少潜在的响应式问题：

<!-- +page.svelte -->
<script>
  import Editor from '$lib/editor/index.svelte'
  export let data;
</script>

<Editor content={data.page.text} />

3. 给Editor组件添加唯一key强制重建（快速兜底方案）

如果上述方法无效，可以通过给Editor组件添加key属性，让Svelte在slug变化时销毁并重建组件，确保加载全新内容：

<!-- +page.svelte -->
<Editor content={data.page.text} key={data.page.slug} />

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