如何避免Next.js中getStaticProps重复执行或无参数时不执行？

在Next.js的动态路由页面（如[productSlug].js）中，getStaticProps出现空context.params的情况，通常和开发模式的预渲染逻辑或getStaticPaths的配置有关。以下是几种规范的处理方式：

1. 直接校验context.params的有效性 #

在getStaticProps开头先判断context.params是否存在，以及productSlug是否为有效值，不满足条件则直接返回空props，跳过查询：

export async function getStaticProps(context) {
  // 先校验params及productSlug的有效性
  const productSlug = context.params?.productSlug;
  if (!productSlug || typeof productSlug !== 'string' || productSlug.trim() === '') {
    return {
      props: {}, // 返回空props，后续组件可做对应处理
      // 若生产环境且fallback为false，也可返回notFound: true触发404
      // notFound: true
    };
  }

  // 仅当参数有效时执行WPGraphQL查询
  const productData = await fetchWPGraphQLData(productSlug);

  return {
    props: { productData },
    revalidate: 60, // 根据需求配置页面重新验证时间
  };
}

2. 配合getStaticPaths的fallback配置优化 #

根据页面的静态生成策略，通过getStaticPaths的fallback参数控制预渲染逻辑，减少空params的触发场景：

• 若fallback: false：仅生成getStaticPaths中返回的路径，生产环境下getStaticProps不会接收到未定义的params，但开发模式下仍可能触发空params调用，需保留上述校验。
• 若fallback: 'blocking'或true：访问未预渲染的路径时，Next.js会动态生成页面，此时context.params会携带有效参数，但开发阶段的初始调用仍可能出现空params，校验逻辑依然必要。

示例getStaticPaths配置：

export async function getStaticPaths() {
  // 从WPGraphQL获取所有产品slug
  const allProducts = await fetchAllProductSlugs();
  const paths = allProducts.map(product => ({
    params: { productSlug: product.slug },
  }));

  return {
    paths,
    fallback: 'blocking', // 根据业务场景选择false/true/blocking
  };
}

3. 弃用硬编码占位符判断 #

你当前用productSlug === '[productSlug]'的方式不可靠，这只是开发模式下Next.js的临时占位符，生产环境或路由配置变更后可能失效，优先采用参数存在性与有效性的校验逻辑。

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