SvelteKit模板自动遍历对象报错：无法转换undefined/null为对象

问题描述 #

当前手动指定下标遍历嵌套对象的方式可正常运行，但扩展性差：

{#each Object.entries(cdi.data[0][0]) as [key, value], index (key)}
    <li>{key} - {value}</li>
{/each}

{#each Object.entries(cdi.data[0][1]) as [key, value], index (key)}
    <li>{key} - {value}</li>
{/each}

尝试自动遍历所有项时，以下写法触发报错：

{#each Object.entries(cdi.data[0]) as item, i (i)}
    {#each Object.entries(item[i]) as [key, value], index (index)}
      {key} {value}
    {/each}
{/each}

报错信息：

TypeError: Cannot convert undefined or null to object
    at Function.entries (<anonymous>)

解决思路 #

1. 修正内层循环的遍历对象 #

外层#each已经将cdi.data[0]中的每一项直接赋值给了item，无需再通过item[i]取值——item[i]会尝试获取当前对象的第i个属性，而该属性通常不存在，导致传入Object.entries的是undefined，触发报错。直接使用item作为内层循环的遍历对象即可。

2. 增加空值防御 #

为避免cdi.data[0]中存在null/undefined或非对象类型的项，需在遍历前做判断，或用空值合并运算符兜底。

方案一：添加类型判断

{#each cdi.data[0] as item, i (i)}
    {#if typeof item === 'object' && item !== null}
        {#each Object.entries(item) as [key, value], index (key)}
            <li>{key} - {value}</li>
        {/each}
    {/if}
{/each}

方案二：使用空值合并运算符

{#each cdi.data[0] as item, i (i)}
    {#each Object.entries(item ?? {}) as [key, value], index (key)}
        <li>{key} - {value}</li>
    {/each}
{/each}

两种写法均可自动遍历cdi.data[0]下的所有子对象，同时规避空值导致的报错。

内容的提问来源于stack exchange，提问作者Cult of Tranquility