Next.js嵌套动态路由报错：未提供必填参数plantName

错误原因分析 #

错误提示：

Error: A required parameter (plantName) was not provided as a string in getStaticPaths for /plants/[plantName]/streaming-data/[panel]

核心问题出在**[panel].js的getStaticPaths方法**中：你通过listOfPlants.map((plant) => ({ plantName: plant.id }))生成的是包含plantName属性的对象数组，后续遍历直接将这个对象赋值给params里的plantName，而非对象中的字符串值。此外，[plantName].js的getStaticProps存在参数赋值错误，会导致页面接收的参数混乱。

修复方案 #

1. 修正[panel].js的getStaticPaths #

直接提取plant.id字符串，避免包装成对象，确保params中的plantName为字符串类型：

// [panel].js
export async function getStaticPaths() {
  const paths = [];
  // 直接提取plant.id字符串，无需包装为对象
  const listOfPlants = plantsList.map((plant) => plant.id);
  const listOfPanels = [
    'heat-transfer',
    'asset-tags',
    'test-tags',
    'flow-meter-board',
    'pi-data',
    'all-tags',
    'analytics',
    'manual-logs',
    'data-quality',
  ];

  listOfPlants.forEach((plantName) => {
    listOfPanels.forEach((panel) => {
      paths.push({ params: { plantName, panel } });
    });
  });
  return {
    paths,
    fallback: false, // 可根据需求设为true或'blocking'
  };
}

export const getStaticProps = async ({ params }) => ({
  props: {
    panel: params.panel,
    plantName: params.plantName,
  },
});

2. 修正[plantName].js的getStaticProps #

纠正props参数的赋值逻辑，确保传递正确的plantName参数：

// [plantName].js
export const getStaticPaths = async () => ({
  paths: (() => {
    const plants = plantsList;
    const params = plants.map((plant) => ({ params: { plantName: plant.id } }));

    return params;
  })(),
  fallback: true,
});
export const getStaticProps = async ({ params }) => ({
  props: {
    plantName: params.plantName, // 修复原错误的赋值逻辑
  },
});

额外说明 #

• 动态路由/plants/[plantName]/streaming-data/[panel]仅需在最底层的[panel].js中配置getStaticPaths，[plantName].js的getStaticPaths对应/plants/[plantName]路径，二者互不干扰。
• 确保plantsList中的plant.id为字符串类型，若为数字需转换（如plant.id.toString()），避免参数类型不匹配。

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