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

above is the error showing up.My folder structure is plants > [plantName] > streamin-data > [panel] I have defined getStaticPaths inside of [plantName] using statically available list of plant names. And also tried doing the same in [panel] For example two panels are there "a" and "b" and one plantname, so inside of [plant] slug file i created static paths like plantname/a and plantname/b but still the error came up.

// [panel].js
export async function getStaticPaths() {
  const paths = [];
  const listOfPlants = plantsList.map((plant) => ({
    plantName: 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, // can also be true or 'blocking'
  };
}

export const getStaticProps = async ({ params }) => ({
  props: {
    panel: params.panel,
    plantName: params.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: {
    panel: params.plantName,
  },
});

CodePudding user response：

It seems like the plantName value in your paths array is not a string.

listOfPlants is an array of objects, so when you map over it you need to destructure each item to access plantName, like so:

listOfPlants.forEach(({ plantName }) => {