Next.js页面渲染前构造meta图片URL，getStaticProps读params.id报错如何解决？

报错根因 #

getStaticProps 中的 params 对象仅在满足两个前提时可用：首先你的页面是动态路由页面（pages 目录下的文件命名格式为 [id].js/[id].tsx 这类带方括号的形式），其次你必须同时配置 getStaticPaths 方法声明所有需要预渲染的路由参数值。缺少以上任意条件时 params 都会是 undefined，自然读取不到 id 属性。

方案1：静态生成场景（沿用getStaticProps） #

如果你的页面适合静态预渲染，按以下步骤调整：

1. 确认页面文件名为动态路由格式，比如 pages/post/[id].js
2. 添加 getStaticPaths 方法声明所有要预渲染的 id 列表：

export async function getStaticPaths() {
  // 可从接口、本地数据库等渠道获取所有需要预渲染的页面id
  const res = await fetch('你的内部数据源地址')
  const idList = await res.json()
  const paths = idList.map(id => ({
    params: { id: id.toString() }
  }))

  return {
    paths,
    // 未预渲染的路由首次访问时自动生成，不会返回404
    fallback: 'blocking'
  }
}

3. 优化 getStaticProps 增加兜底逻辑：

export async function getStaticProps({ params }) {
  const twitterImage = params?.id 
    ? `https://你的图片域名前缀/${params.id}.jpg` 
    : '你的默认兜底图片地址'
  return {
    props: { twitterImage },
    // 可选配置：增量静态再生间隔，单位秒，到期后自动更新页面内容
    revalidate: 86400
  }
}

4. 页面组件直接读取props即可，无需调用useRouter：

const MyPage= ({ twitterImage }) => {
  return (
    <>
      <Head>
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:image" content={twitterImage} />
      </Head>
      {/* 页面其他内容 */}
    </>
  );
};

方案2：服务端渲染场景（用getServerSideProps） #

如果页面id无法提前枚举，不需要静态预渲染，可直接替换为服务端渲染方案，无需配置getStaticPaths：

export async function getServerSideProps(context) {
  const { id } = context.query
  const twitterImage = id 
    ? `https://你的图片域名前缀/${id}.jpg` 
    : '你的默认兜底图片地址'
  return {
    props: { twitterImage }
  }
}

页面组件的用法和方案1完全一致。

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