SvelteKit循环遍历Prismic返回的JSON对象无法提取文本值如何解决

问题原因 #

你遇到的报错是两个核心原因导致的：

1. Prismic的富文本字段（包括你这里的name、last_name）返回的都是结构化块数组，即使是纯文本内容，也会包在数组的第一项对象里
2. 你之前写的account.data.last_name[0].text逻辑本身是正确的，报错大概率是接口数据未完成加载时就触发渲染，或者部分文档的last_name字段为空，访问不存在的嵌套属性时触发了未定义错误

可用解法 #

1. 可选链兜底（最简便，不需要额外依赖）

加可选链符?.在每一层属性访问前，属性不存在时会自动返回undefined，不会触发报错，再用空值兜底避免渲染空白：

{#each results as account}   
  <li>{ account?.data?.last_name?.[0]?.text || '' }</li>    
{/each}

2. 适配多块富文本场景

如果你的last_name可能存在多个富文本块，遍历所有块拼接文本内容：

{#each results as account}   
  <li>{ account.data.last_name?.map(block => block.text).join('') || '' }</li>    
{/each}

3. Prismic官方工具法（推荐，符合Prismic使用规范）

Prismic官方SDK提供了专门把富文本数组转纯文本的asText方法，自动处理空值、多块等各种异常场景：
首先在文件头部引入方法：

import { asText } from '@prismicio/client'

然后在循环中直接调用：

{#each results as account}   
  <li>{ asText(account.data.last_name) }</li>    
{/each}

调试方案 #

如果以上方法仍然不生效，先加调试代码确认每一项的实际结构：

{#each results as account, index}
  {@debug account.data.last_name}
  <li>第{index}项last_name结构：{JSON.stringify(account.data.last_name)}</li>
{/each}

输出后核对是否和你序列化得到的结构一致，排查是否存在个别文档字段结构异常的问题。

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