Next.js 13.4.4中mdx-components.tsx无法访问数据及渲染异常

一、自定义MDX元素不渲染的修复 #

你当前代码的核心问题是组件覆盖顺序错误：先定义h1再展开...components，会导致默认的h1组件覆盖你自定义的版本。调整顺序即可解决：

import type { MDXComponents } from "mdx/types";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components, // 先展开默认组件集合
    h1: ({ children }) => <h1> - {children} </h1>, // 再覆盖自定义h1
    // code: SyntaxHighlight,
  };
}

二、给MDX组件传递数据的两种方案 #

方案1：通过Props直接传递 #

在渲染MDX的页面（如app/posts/[slug]/page.tsx）中，将数据作为props传给MDX组件：

import PostContent from "./content.mdx";

export default function PostPage() {
  const postData = { 
    author: "示例作者", 
    publishDate: "2024-01-01" 
  };
  
  return <PostContent postData={postData} />;
}

随后在mdx-components.tsx中，自定义组件时可直接获取这些props：

import type { MDXComponents } from "mdx/types";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
    h1: ({ children, ...props }) => {
      const { postData } = props as { postData: { author: string; publishDate: string } };
      return <h1>{postData.author} | {children}</h1>;
    },
    p: ({ children, ...props }) => {
      const { postData } = props as { postData: { publishDate: string } };
      return <p><small>发布于：{postData.publishDate}</small><br/>{children}</p>;
    }
  };
}

方案2：通过React Context传递全局数据 #

如果需要给多个MDX组件共享数据，使用Context更高效：

1. 创建Context文件（如app/contexts/PostContext.tsx）：

import { createContext, useContext } from "react";

type PostContextType = {
  author: string;
  publishDate: string;
};

const PostContext = createContext<PostContextType | null>(null);

export function PostProvider({ children, data }: { children: React.ReactNode; data: PostContextType }) {
  return <PostContext.Provider value={data}>{children}</PostContext.Provider>;
}

export function usePostContext() {
  const context = useContext(PostContext);
  if (!context) throw new Error("usePostContext必须在PostProvider内部使用");
  return context;
}

2. 在MDX渲染页面中用Provider包裹：

import PostContent from "./content.mdx";
import { PostProvider } from "@/app/contexts/PostContext";

export default function PostPage() {
  const postData = { author: "示例作者", publishDate: "2024-01-01" };
  
  return (
    <PostProvider data={postData}>
      <PostContent />
    </PostProvider>
  );
}

3. 在mdx-components.tsx中获取Context数据：

import type { MDXComponents } from "mdx/types";
import { usePostContext } from "@/app/contexts/PostContext";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  const { author } = usePostContext();
  
  return {
    ...components,
    h1: ({ children }) => <h1>{author} · {children}</h1>,
  };
}

内容的提问来源于stack exchange，提问作者Asadullah Hil Galib