GraphQL查询Prismic CMS嵌套text字段报未定义错误修复方案

核心原因 #

• 字段类型不匹配：你能正常读取的tag是Prismic的简单键值文本字段，接口直接返回字符串值；而报错的post_paragraph、post_title、文化类内容的title/paragraph都属于富文本/标题类结构化字段，这类字段GraphQL返回的是块级数组，text属性是挂在数组内每个内容块上的，不是字段本身的直接属性，直接在字段层级读.text属于访问不存在的属性。
• 内联片段未做类型分支判断：你在查询里用内联片段声明了PrismicBlog、PrismicCulture两种文档的返回字段，但遍历links数组时没有先判断当前项的文档类型，部分数组项属于另一种文档类型时，你访问的目标字段路径根本不存在，中间层返回undefined，再读取text就会抛出错误。
• 缺少空值兜底：Prismic关联字段如果遇到关联文档未发布、被删除、权限不可见的情况，对应document层会返回null，直接链式读取深层属性会触发连锁的undefined访问错误。

修复步骤 #

1. 遍历数组时先加类型守卫，按文档类型分支处理字段，避免跨类型读不存在的属性：

   return links.map(linkItem => {
     // 处理博客类型内容
     if (linkItem?.blog?.document?.__typename === 'PrismicBlog') {
       const blogData = linkItem.blog.document.data
       // 博客字段逻辑写在这里
     }
     // 处理文化类内容
     if (linkItem?.culture?.document?.__typename === 'PrismicCulture') {
       const cultureData = linkItem.culture.document.data
       // 文化类字段逻辑写在这里
     }
   })
   

2. 修正结构化文本字段的读取逻辑，不要直接读字段根下的text，遍历结构化块拼接文本内容，同时加空数组兜底：

   // 读取博客段落纯文本示例
   const blogParagraph = (blogData.post_paragraph || [])
     .map(contentBlock => contentBlock.text || '')
     .join('\n')
   
   // 读取博客标题纯文本示例
   const blogTitle = (blogData.post_title || [])
     .map(contentBlock => contentBlock.text || '')
     .join('')
   
   // 文化类的标题、段落读取逻辑和上面一致，替换对应字段名即可
   

3. 所有深层属性访问统一加可选链?.做防御性编程，避免某一层返回null/undefined时直接抛错，尤其是关联文档类的嵌套字段。

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