Next.js项目中使用react-notion-x渲染Notion页面时出现Cannot read properties of undefined (reading 'prototype')错误

看起来你遇到的这个问题我之前也踩过坑！核心原因是Next.js 13+的App Router默认使用React Server Components（RSC），而react-notion-x的NotionRenderer是依赖浏览器环境的客户端组件，直接在服务器组件中调用就会触发这类运行时错误——服务器端没有浏览器相关的DOM对象，导致库内部代码访问到了undefined的prototype。

下面给你两种可行的解决方案，都是围绕"让客户端组件在正确的环境中运行"来处理的：

方案一：拆分组件（推荐，性能更优） #

把数据获取和渲染逻辑分开，服务器组件负责获取Notion数据，专门的客户端组件负责渲染NotionRenderer：

1. 创建客户端渲染组件 #

新建一个NotionPage.jsx文件，明确标记为客户端组件：

'use client';

import { NotionRenderer } from "react-notion-x";

// 导入react-notion-x的基础样式（如果还没全局导入的话）
import 'react-notion-x/src/styles.css';

export default function NotionPage({ recordMap }) {
  return (
    <NotionRenderer 
      recordMap={recordMap} 
      fullPage={true} 
      darkMode={false} 
    />
  );
}

2. 修改原页面组件（服务器组件） #

在原页面中保留数据获取逻辑，导入并使用刚才的客户端组件：

import Container from "@/components/elements/Container"
import PageHeading from "@/components/elements/PageHeading"
import BackButton from "@/components/elements/BackButton"
import { NotionAPI } from 'notion-client'
import NotionPage from './NotionPage'; // 导入客户端组件

const notion = new NotionAPI()

export default async function ProjectDetailPage({ params }) {
  // 服务器端获取Notion数据，性能更好
  const recordMap = await notion.getPage('067dd719a912471ea9a3ac10710e7fdf')
  console.log(recordMap)

  return (
    <>
      <Container>
        <BackButton />
        <PageHeading title="" />
        {/* 将数据传递给客户端组件渲染 */}
        <NotionPage recordMap={recordMap} />
      </Container>
    </>
  )
}

方案二：全客户端组件（适合简单场景） #

如果不想拆分组件，可以直接把整个页面标记为客户端组件，用SWR之类的库在客户端获取数据：

'use client';

import Container from "@/components/elements/Container"
import PageHeading from "@/components/elements/PageHeading"
import BackButton from "@/components/elements/BackButton"
import { NotionRenderer } from "react-notion-x"
import { NotionAPI } from 'notion-client'
import useSWR from 'swr';

import 'react-notion-x/src/styles.css';

const notion = new NotionAPI()

// 定义数据获取函数
const fetchNotionPage = async () => {
  return await notion.getPage('067dd719a912471ea9a3ac10710e7fdf')
}

export default function ProjectDetailPage({ params }) {
  const { data: recordMap, error } = useSWR('notion-project-page', fetchNotionPage)

  // 处理加载和错误状态
  if (error) return <div>页面加载失败，请稍后重试</div>
  if (!recordMap) return <div>加载中...</div>

  return (
    <>
      <Container>
        <BackButton />
        <PageHeading title="" />
        <NotionRenderer recordMap={recordMap} fullPage={true} darkMode={false} />
      </Container>
    </>
  )
}

额外注意事项 #

别忘了确保react-notion-x的样式被正确导入，要么在客户端组件中导入，要么在全局样式文件（比如globals.css）中添加：

@import 'react-notion-x/src/styles.css';

这样调整后，NotionRenderer就能在浏览器环境中正常运行，不会再出现那个prototype相关的错误了。

备注：内容来源于stack exchange，提问作者M. Al lail Qadrillah