Next.js+TS展示Strapi GraphQL字体数据遇类型错误如何解决

核心问题分析 #

1. 类型不匹配：你错误地将Context返回的数据标注为FontEntityResponse，但实际返回的是包含fonts字段的对象，其中fonts属于FontEntityResponseCollection类型（对应多字体集合的查询结果）。FontEntityResponse是单个字体实体的响应类型，和当前集合数据结构完全不符。
2. 数据路径错误：你尝试访问data.data.attributes来遍历，但实际数据结构中，字体数组的路径是data.fonts.data，每个数组元素是FontEntity，其attributes字段才是包含font_name的Font对象。
3. 遍历未返回元素：原map函数中的<li>没有返回，导致不会渲染任何列表项。

修正方案 #

1. 定义正确的类型 #

根据Context返回的实际数据结构，定义匹配的类型：

import { FontEntityResponseCollection } from '@/generated';

type ThemeContextData = {
  fonts: FontEntityResponseCollection;
};

2. 修正页面代码 #

'use client'
import {getDataFromTree} from '@apollo/client/react/ssr'
import withApollo from '../lib/withApollo'
import { useThemeContext } from './appState'
import { FontEntityResponseCollection } from '@/generated'

type ThemeContextData = {
  fonts: FontEntityResponseCollection;
};

const Home = () => {
  const data: ThemeContextData = useThemeContext()

  console.log('--data---', data)

  return (
      <div>
        {JSON.stringify(data)}
        <ul>
          {/* 遍历fonts.data数组，每个元素是FontEntity */}
          {data.fonts.data.map((fontEntity) => (
            <li key={fontEntity.id}>{fontEntity.attributes?.font_name}</li>
          ))}
        </ul>
      </div>
  )
}

export default withApollo(Home, {getDataFromTree})

关键修正点说明 #

• 替换类型标注：将FontEntityResponse改为自定义的ThemeContextData，匹配实际数据结构。
• 修正遍历路径：从data.data.attributes改为data.fonts.data，遍历每个FontEntity。
• 正确获取字体名称：通过fontEntity.attributes?.font_name访问，使用可选链避免空值报错。
• 添加key属性：列表项必须有唯一key，这里用fontEntity.id作为标识。
• 修复返回值：用括号包裹JSX实现箭头函数隐式返回，确保列表项被渲染。

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