使用generateMetadata()无法渲染动态页面的标题与描述

问题根源 #

你在generateMetadata函数里错误使用了React的use钩子——这个钩子只能在React组件或自定义钩子内部调用，而generateMetadata是Next.js的独立异步函数，不能直接用它。

修复后的完整代码 #

import { use } from 'react'
import Phrase from '../../../../components/Phrase'

async function getPhrase(id) {
  const res = await fetch(`${process.env.API_URI}/api/phrases/2/${id}`)
  // 加个错误处理，避免请求崩掉页面
  if (!res.ok) {
    throw new Error('获取短语数据失败')
  }
  const data = await res.json()
  return data
} 

// 修正后的元数据生成逻辑
export async function generateMetadata({ params }) { 
  const id = params.id
  // 直接await异步请求就行，不用use钩子
  const data = await getPhrase(id)

  return {
    title: data[0].title,
    description: `Level ${data[0].title}`,
  }
}

export default function page({ params }) {
  const id = params.id
  // 组件里用use处理异步请求是没问题的
  const data = use(getPhrase(id))

  return (
    <div className="p-10 ">
      <div className="flex flex-col justify-center items-center px-5">
        <Score col_id={data[0].id} />

        {data[0].phrases.map((i, index) => {
          return <Phrase key={index} phrases={i} />
        })}
      </div>
    </div>
  )
}

关键说明 #

• generateMetadata本身就是异步函数，直接通过await调用数据接口就能拿到数据，不需要借助use钩子
• 页面组件里用use(getPhrase(id))是React 18+支持的合法异步数据获取方式，不用改
• 给getPhrase加错误处理能避免API请求失败时，元数据生成或页面渲染直接崩溃

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