Next.js动态路由下如何通过serviceId访问JSON数据

问题根源 #

你的问题主要出在两个地方：

1. JSON结构设计不合理：当前serviceId是一个数组，每个元素是仅包含单个键（如service1）的对象，无法直接通过serviceId参数快速索引，必须遍历数组查找，既麻烦又低效。
2. 数据访问语法错误：你尝试的json.{serviceId}.title是无效的JavaScript语法，动态访问对象属性必须使用方括号语法obj[key]，但原结构不支持直接这样使用。

解决方案一：优化JSON结构（推荐） #

把数组改成键值对形式的对象，直接用service1、service2作为键，这样可以通过serviceId直接定位数据。

调整后的JSON结构 #

{
  "services": {
    "service1": {
      "id": "xx",
      "title": "xxx",
      "description": "xx",
      "featuredCompany": []
    },
    "service2": {
      "id": "xxx",
      "title": "xxx",
      "description": "xxx",
      "featuredCompany": []
    }
  }
}

对应[serviceId].tsx代码 #

import { useRouter } from 'next/router';
// 替换成你的JSON文件实际路径
import serviceData from '../data/services.json';

export default function ServiceDetailPage() {
  const router = useRouter();
  const { serviceId } = router.query;

  // 处理路由未加载完成的情况
  if (!serviceId) {
    return <div>加载中...</div>;
  }

  // 动态获取对应服务数据，TypeScript需做类型断言
  const currentService = serviceData.services[serviceId as keyof typeof serviceData.services];

  // 处理找不到服务的情况
  if (!currentService) {
    return <div>服务不存在</div>;
  }

  return (
    <div>
      <ArticleWithPicture 
        title={currentService.title} 
        description={currentService.description} 
      />
    </div>
  );
}

解决方案二：不修改JSON结构的兼容处理 #

如果无法调整JSON结构，需要遍历数组查找对应服务：

对应[serviceId].tsx代码 #

import { useRouter } from 'next/router';
import serviceData from '../data/services.json';

export default function ServiceDetailPage() {
  const router = useRouter();
  const { serviceId } = router.query;

  if (!serviceId) {
    return <div>加载中...</div>;
  }

  // 遍历数组，找到包含目标serviceId的对象
  const matchedItem = serviceData.serviceId.find(item => item.hasOwnProperty(serviceId));
  // 提取服务内容
  const currentService = matchedItem ? matchedItem[serviceId as keyof typeof matchedItem] : null;

  if (!currentService) {
    return <div>服务不存在</div>;
  }

  return (
    <div>
      <ArticleWithPicture 
        title={currentService.title} 
        description={currentService.description} 
      />
    </div>
  );
}

额外注意事项 #

• Next.js客户端渲染时，router.query初始值可能为undefined，必须添加空值判断避免报错。
• 如果使用TypeScript，需要通过类型断言处理serviceId的类型问题，避免类型报错。
• 确保JSON文件的导入路径正确，且属性名（如services或serviceId）与代码中的访问一致。

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