Next.js非动态路由场景下如何通过ID获取JSON指定商品项的props

核心思路 #

不管路由是不是动态路由，只要能拿到目标商品的ID，就可以通过数组的find方法从JSON列表中匹配到对应商品项，再把属性注入组件即可。根据你的使用场景可以选择以下3种实现方式：

方案1：URL查询参数带ID（无需动态路由支持） #

哪怕路由是静态路由，也可以直接在URL后拼接?id=xxx查询参数传递ID，是最通用的实现方式：

1. 触发跳转时拼接参数，示例：

// 列表页跳转逻辑示例，React Router同理可用
import { useRouter } from 'next/router'
const router = useRouter()
// 点击商品时跳转
const jumpToProduct = (productId) => {
  router.push(`/你的静态页面路径?id=${productId}`)
}

2. 目标页面获取ID并匹配数据：

import { ArtroscopiaPlus } from '你的JSON文件路径'
import { useRouter } from 'next/router'

const GrapaIQL = () => {
  const router = useRouter()
  // 从查询参数取ID，非Next.js项目可通过window.location.search解析获取
  const productId = router.query?.id
  // 匹配商品数据
  const product = ArtroscopiaPlus.find(item => item.id === productId)
  // 容错处理：未匹配到商品时的兜底
  if (!product) return <div>未找到对应商品</div>

  return (
    <>
        <ItemS>
            <TitleItem className="title-item">{product.title}</TitleItem>
            <ContentItem>
                <ImageDiv className="image-div">
                    <ItemImg src={product.img} alt={`${product.title} Company`} className="item-img" data-aos="fade-right" />
                </ImageDiv>
                <div className="info-div">
                    <table class="tabla-chica" data-aos="fade-left">
                        {/* 原有表格内容 */}
                    </table>
                </div>
                <Pdf path={product.url} />
            </ContentItem>
            <ScrollArrow />
        </ItemS>
    </>
  )
}

方案2：全局状态传ID（ID不暴露在URL） #

如果不想把商品ID放在URL上，可以用全局状态存储选中的商品ID：

1. 用Context/Redux/Zustand等状态管理工具，在商品列表页把选中的ID存入全局状态
2. 在GrapaIQL组件中直接从全局状态取ID，再执行和方案1一样的匹配逻辑即可

方案3：硬编码匹配ID（单商品对应独立静态页） #

如果你的GrapaIQL组件本身就是固定对应某一个商品的独立静态页面，直接在组件内写死ID匹配即可，是最简单的实现：

import { ArtroscopiaPlus } from '你的JSON文件路径'

const GrapaIQL = () => {
  // 直接匹配当前页面对应的商品ID
  const product = ArtroscopiaPlus.find(item => item.id === 'grapa-iql')
  if (!product) return <div>未找到对应商品</div>

  // 渲染逻辑和方案1完全一致
}

扩展：多商品复用同一个组件 #

如果需要用同一个组件渲染不同商品，直接把组件改造为接收productId属性即可：

// 通用商品组件
const CommonProduct = ({ productId }) => {
  const product = ArtroscopiaPlus.find(item => item.id === productId)
  if (!product) return <div>未找到对应商品</div>
  // 渲染逻辑同上
}

// 父组件调用时传入对应ID即可
<CommonProduct productId="grapa-iql" />
<CommonProduct productId="kurosaca-romo" />

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