使用generateMetaData时，Next.js中<button>标签引发客户端异常

在Next.js项目中使用generateMetaData生成元数据时，页面内的<button>标签无法正常响应点击事件，触发错误提示：Application error: a client-side exception has occurred (see the browser console for more information)。

generateMetaData代码 #

const getArticle = cache((id) => {
  const articleService = new ArticleService();
  return articleService.getOne(id).then((res) => {
    return res.resultFinal;
  });
});

export async function generateMetadata({ params }) {
  const id = params.id;
  const articleService = new ArticleService();

  const article = await articleService.getOne(id).then((res) => {
    return res.resultFinal;
  });

  if (!article) {
    return {
      title: "Article not found",
      description: "Article not found",
      openGraph: {
        title: "Article not found",
        description: "Article not found",
      },
    };
  }

  return {
    title: article.title,
    description: article.description,
    openGraph: {
      title: article.title,
      description: article.description,
      images: [process.env.NEXT_PUBLIC_IMAGE_BASE_URL + "/" + article.medias[0].url],
    },
  };
}

页面组件代码 #

export default async function Page({ params, searchParams }) {
  const article = await getArticle(params.id);

  const sharedFacebook = async () => {
    alert("clicked");
  };

   return (
      <>
      <button onClick={sharedFacebook}></button>
      </>
    )
}

已尝试的解决方式：

• 在sharedFacebook函数内添加"use client"，按钮可正常渲染，但点击仍触发相同错误；
• 在组件顶部添加"use client"，问题依旧存在。

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