React开发Shopify前端：ProductDetailsPage路由请求ID参数报错

问题场景 #

使用React开发Shopify店铺前端页面，创建ProductDetailsPage组件时，请求产品数据后出现错误：

Variable $id of type ID! was provided invalid value

路由代码 #

<Route
  path='/product-details-page/:id'
  element={<ProductDetailPage client={client} />}
/>

ProductDetailsPage组件代码 #

import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'

const ProductDetailsPage = ({ client }) => {
  const { id } = useParams()
  const [product, setProduct] = useState(null)

  useEffect(
    (id) => {
      client.product
        .fetch(id)
        .then((fetchedProduct) => {
          setProduct(fetchedProduct)
        })
        .catch((error) => {
          console.log('Error fetching product:', error)
        })
    },
    [client, id]
  )

  if (!product) {
    return <div>Loading...</div>
  }

  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
    </div>
  )
}

export default ProductDetailsPage

错误原因 #

1. useEffect回调参数错误：useEffect的回调函数不接收自定义参数，你在回调里声明了(id)参数，这会覆盖外部通过useParams()获取的id变量，导致传入client.product.fetch()的id是undefined，触发Shopify API的类型校验错误。
2. （可选）路由跳转时可能传递了无效的ID值，比如空值或不符合Shopify要求的ID格式。

解决方案 #

1. 修正useEffect回调写法 #

去掉回调函数的参数，直接使用外部作用域的id变量：

useEffect(
  () => { // 移除多余的(id)参数
    client.product
      .fetch(id)
      .then((fetchedProduct) => {
        setProduct(fetchedProduct)
      })
      .catch((error) => {
        console.log('Error fetching product:', error)
      })
  },
  [client, id]
)

2. 添加ID有效性校验（可选） #

在发起请求前先校验id是否存在，避免无效请求：

useEffect(
  () => {
    if (!id) return; // 校验id有效性，无值则终止请求
    client.product
      .fetch(id)
      .then((fetchedProduct) => {
        setProduct(fetchedProduct)
      })
      .catch((error) => {
        console.log('Error fetching product:', error)
      })
  },
  [client, id]
)

3. 确认路由跳转时的ID有效性 #

确保从产品列表等页面跳转至详情页时，传递的是有效的Shopify产品ID，示例代码：

// 产品列表项跳转示例
<Link to={`/product-details-page/${product.id}`}>
  {product.title}
</Link>

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