TypeScript+Sanity.io电商项目遇_ref读取未定义TypeError，求解决方案

错误原因 #

• 部分product对象的category字段为undefined：要么是Sanity后台中该产品未关联分类，要么是你的GROQ查询没正确获取到category关联数据，导致API返回的产品对象里没有category属性。
• 传入的category参数超出categories数组索引范围：比如categories数组长度为3，但传入的category值是3，此时categories[category]会是undefined，不过结合错误提示，这个是次要可能性，核心问题还是product.category未定义。

解决办法 #

1. 过滤无分类产品+处理数组越界 #

在代码里先做有效性校验，同时用可选链避免读取undefined属性：

const showProducts = (category: number) => {
  // 先校验分类索引是否合法
  if (category < 0 || category >= categories.length) {
    console.warn("无效的分类索引");
    return [];
  }
  const targetCategory = categories[category];
  
  return products
    // 用可选链?.确保category存在时才读取_ref
    .filter((product) => product.category?._ref === targetCategory._id)
    .map((product) => <Product product={product} key={product._id}/>);
};

2. 检查Sanity数据与查询 #

• 登录Sanity后台，逐个检查产品是否都关联了分类，补全未设置分类的产品数据。
• 检查你的GROQ查询语句，确保包含category关联字段的获取，示例正确查询：

*[_type == "product"] {
  _id,
  name,
  // 必须显式获取category的关联数据
  category -> {_ref, _id, name}
}

如果查询里没写category -> ...，API返回的产品对象就不会有category字段。

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