Next.js13中@uiw/react-md-editor的onChange类型错误解决求助

问题场景 #

在Next.js 13应用中使用@uiw/react-md-editor的MDEditor.Markdown实现Markdown预览功能，组件已标记为客户端组件（添加了"use client"），但仍出现以下警告：

Warning: Expected onChange listener to be a function, instead got a value of string type.

用户尝试的代码：

"use client";

import MDEditor from '@uiw/react-md-editor';
import { useTheme } from 'next-themes';


const PostContent = ({ content }) => {
    const { theme } = useTheme();
    return (
        <div className="py-2 px-3 max-md:px-2">
            <div>
                {<MDEditor.Markdown wrapperElement={{ "data-color-mode": theme }} source={content} style={{ background: "transparent" }} />}
            </div>

        </div>
    )
}

export default PostContent

错误栈信息：

Warning: Expected `onChange` listener to be a function, instead got a value of `string` type.
mdeditor
div
ReactMarkdown@webpack-internal:///(app-pages-browser)/./node_modules/react-markdown/lib/react-markdown.js:88:42
div
__webpack_exports__.default<@webpack-internal:///(app-pages-browser)/./node_modules/@uiw/react-markdown-preview/esm/index.js:54:9
div
div
PostContent@webpack-internal:///(app-pages-browser)/./src/components/posts/PostContent.jsx:10:23
div
recursivelyTraverseLayoutEffects@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:21829:32
commitLayoutEffectOnFiber@webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20309:41
...（省略后续重复栈信息）

解决方案 #

这个警告的核心原因是MDEditor.Markdown内部依赖的react-markdown组件接收到了字符串类型的onChange属性，而非预期的函数。可以通过以下方式修复：

方法1：显式传递空的onChange函数 #

给MDEditor.Markdown组件添加一个空的onChange函数，明确告诉组件不需要处理内容变更：

"use client";

import MDEditor from '@uiw/react-md-editor';
import { useTheme } from 'next-themes';


const PostContent = ({ content }) => {
    const { theme } = useTheme();
    return (
        <div className="py-2 px-3 max-md:px-2">
            <div>
                <MDEditor.Markdown 
                    wrapperElement={{ "data-color-mode": theme }} 
                    source={content} 
                    style={{ background: "transparent" }}
                    onChange={() => {}} // 添加空的onChange函数
                />
            </div>
        </div>
    )
}

export default PostContent

方法2：升级组件版本 #

该问题可能是@uiw/react-md-editor版本的兼容性bug，尝试升级到最新版本：

npm update @uiw/react-md-editor
# 或使用yarn
yarn upgrade @uiw/react-md-editor

方法3：检查content参数 #

确保传递给组件的content是纯字符串类型，没有被错误赋值或转换为其他类型，避免组件误将其识别为onChange属性。

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