在Next.js中从Strapi获取产品数据时遇属性读取错误

你遇到的问题核心是未正确匹配Strapi关联字段的嵌套返回结构，哪怕Insomnia显示数据正常，代码里的字段访问路径可能和实际返回层级不匹配。

第一步：确认API返回的完整结构 #

先在代码里打印返回数据，明确关联字段的位置：

console.log(JSON.stringify(data, null, 2));

Strapi一对一关联的REST API返回结构通常是这样的（以Base关联为例）：

{
  "data": {
    "id": 1,
    "attributes": {
      // 产品自身字段
      "productName": "示例产品",
      // 关联的Base集合数据
      "Base": {
        "data": {
          "id": 1,
          "attributes": {
            "baseTitle": "基础标题",
            "Description": "产品描述",
            "Color": "红色"
          }
        }
      }
    }
  }
}

第二步：修正字段访问路径 #

按照嵌套层级正确读取关联字段，修改后的代码示例：

export default async function Product({ params }: {params: {id: number}}) {
  try{
    const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/products/${params.id}?populate=*`);
    if(!res.ok){
      throw new Error(`HTTP error! status: ${res.status}`);
    }
    const responseData = await res.json();
    // 提取产品主数据和关联的Base数据
    const product = responseData.data.attributes;
    const baseInfo = product.Base.data.attributes;
    
    // 正常访问关联字段
    console.log(baseInfo.baseTitle, baseInfo.Description, baseInfo.Color);
    
    return (
      <div>
        <h1>{product.productName}</h1>
        <h2>{baseInfo.baseTitle}</h2>
        <p>{baseInfo.Description}</p>
        <span>颜色：{baseInfo.Color}</span>
      </div>
    );
  } catch (error) {
    return <div>加载产品失败：{(error as Error).message}</div>;
  }
}

额外排查点 #

• 核对Strapi中Base集合的字段名大小写（比如Description首字母大写，别写成小写的description）
• 可以显式指定关联字段替代populate=*，避免歧义：populate=Base

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