Gatsby动态生成商品页后出现404及qty未定义错误如何解决

1. 404错误原因 #

• 你在gatsby-node.js中生成商品路径的逻辑存在重复冲突风险：当前使用${product.node.category.name.toLowerCase()}/${product.node.name.split(' ')[0]}作为页面路径，只要同分类下有商品名称第一个空格前的字段重复，后生成的页面就会覆盖之前的页面，导致部分商品访问时出现404。
• 修复方案：在路径中加入唯一标识避免重复，修改路径生成逻辑为：

path: `/${product.node.category.name.toLowerCase()}/${product.node.strapiId}-${product.node.name.split(' ')[0].toLowerCase()}`

修改后需要同步调整商品列表页的跳转链接规则，保持和生成规则完全一致。

2. qty未定义错误原因 #

错误出在QtyButton.js的状态初始化逻辑：

• 当isCart为true时，你直接取existingItem.qty作为qty的初始值，但如果当前商品变体还未加入购物车，existingItem的值就是null，访问null.qty自然会抛出未定义错误。
• 修复方案：给初始值加兼容判断，修改useState相关代码：

const [qty, setQtyState] = useState(isCart ? (existingItem ? existingItem.qty : 1) : 1)

另外需要补充检查gatsby-node.js里的GraphQL查询，你当前没有拉取商品的库存字段，要确认传入QtyButton的stock参数是有效值，否则后续访问stock[selectedVariant].qty也会抛出同类未定义错误，需要在allStrapiProduct的variants字段中补充库存字段的查询。

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