动态路由上的nextjs 404

Question

在nextjs pages/[catSlug]/[slug]中加载动态路由时出现404错误

路由参数正确，URL正确，但是当页面加载时，我得到了404。

下面的代码中是否需要更改才能使其正常工作？

import { GraphQLClient } from 'graphql-request';
import React from 'react'
import { useRouter } from 'next/router'

const graphcms = new GraphQLClient(
  'api'
);

export async function getStaticProps({ params }) {
  const { product } = await graphcms.request(
    `
    query ProductPageQuery($slug: String!) {
      product(where: { slug: $slug }) {
        name
        price
        slug
      }
    }
  `,
    {
      slug: params.slug,
      // catSlug: params.catSlug
    }
  );

  return {
    props: {
      product
    }
  };
}

export async function getStaticPaths() {

  const { products } = await graphcms.request(`
    {
      products {
        slug
        name
        cat
      }
    }
  `);

  return {
    paths: products.map(product => {
      return {
        params: {
          slug: product.slug,
          catSlug: product.cat
        }
      }
    }),
    fallback: false,
  }
}

export default ({ product }) => {
  {console.log(product)}
  return(
    <React.Fragment>
      <h1>{product.name}</h1>
      <p>{product.slug}</p>
    </React.Fragment>
  )
}