Svelte Astro应用中ctx[3]未定义错误排查：自动完成组件适配问题

问题场景 #

原本使用字符串数组的自动完成组件运行正常，改为使用包含slug和name键的对象数组后，出现运行时类型错误：

• 当filteredPlants.length > 0时，抛出Uncaught (in promise) TypeError: ctx[3] is undefined
• 移除循环中的index变量后，错误变为ctx[2] is undefined
• 过滤功能正常，控制台能输出预期值，TypeScript编译无报错

相关代码 #

{#if filteredPlants.length > 0}
  <hr class="mx-4"/>
  <ul class="mx-4 my-4">
    {#each filteredPlants as plant, index}
      <li
        class={`py-1 rounded-lg ${hiLitedPlant.name === plant.name ? 'bg-black text-white' : ''}`}
        on:mouseenter={() => hiLiteIndex = index}
        on:click={() => navigate(hiLitedPlant.slug)}
        on:keydown={navigateList}
      >
        <p class="mx-2">{plant.name}</p>
      </li>
    {/each}           
  </ul>
{/if}

排查与解决方案 #

1. 修复hiLitedPlant的空值访问 #

报错核心原因是hiLitedPlant可能处于undefined状态时，直接访问了它的name或slug属性：

• 组件初始化时，若没有给hiLitedPlant设置初始值，此时filteredPlants已有数据，但hiLitedPlant未被赋值（比如还没触发鼠标hover事件），就会触发属性访问错误。
• 解决方式：
  • 给hiLitedPlant设置初始值，比如在filteredPlants更新时自动选中第一项：

    $: if (filteredPlants.length > 0 && !hiLitedPlant) {
      hiLitedPlant = filteredPlants[0];
    }
    

  • 或使用可选链操作符避免空值访问：

    class={`py-1 rounded-lg ${hiLitedPlant?.name === plant.name ? 'bg-black text-white' : ''}`}
    on:click={() => hiLitedPlant?.slug && navigate(hiLitedPlant.slug)}
    

2. 同步hiLiteIndex与filteredPlants的长度 #

如果filteredPlants是动态更新的，hiLiteIndex可能超出新数组的长度范围，导致通过filteredPlants[hiLiteIndex]获取的hiLitedPlant为undefined：

• 解决方式：在filteredPlants更新时重置索引：

  $: if (filteredPlants.length > 0) {
    hiLiteIndex = Math.min(hiLiteIndex, filteredPlants.length - 1);
    hiLitedPlant = filteredPlants[hiLiteIndex];
  }
  

3. 完善TypeScript类型定义 #

虽然编译通过，但可能hiLitedPlant的类型未正确包含undefined情况，导致TypeScript未检测到潜在风险：

• 解决方式：明确hiLitedPlant的类型为可选对象：

  interface Plant {
    slug: string;
    name: string;
  }
  
  let hiLitedPlant: Plant | undefined;
  

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