React新手使用react-draft-wysiwyg时遇TypeScript类型错误：属性‘blockStyleFn’不存在于指定类型中

我之前也碰到过这个问题，本质是react-draft-wysiwyg的官方TypeScript类型定义里默认没有包含blockStyleFn的属性声明，导致TS无法识别这个Draft.js原生支持的配置项。下面给你两种可行的修复方案：

方案1：扩展Editor组件的类型定义（推荐） #

我们可以通过TypeScript的声明合并特性，给react-draft-wysiwyg的EditorProps接口新增blockStyleFn的类型声明，让TS正确识别这个属性。

你可以在项目根目录创建一个react-draft-wysiwyg.d.ts类型声明文件，或者直接在TextEditor.tsx的顶部添加以下代码：

import { ContentBlock } from 'draft-js';
import { EditorProps } from 'react-draft-wysiwyg';

declare module 'react-draft-wysiwyg' {
  interface EditorProps {
    // 匹配Draft.js blockStyleFn的类型：接收ContentBlock，返回样式类名或空值
    blockStyleFn?: (contentBlock: ContentBlock) => string | null | undefined;
  }
}

这段代码会告诉TypeScript，EditorProps接口新增了blockStyleFn这个可选属性，完全对齐Draft.js原生的函数类型，之后TS就不会再报错了。

方案2：临时类型断言（快速绕过校验） #

如果只是想快速解决问题、跳过类型检查，可以给Editor组件做类型断言，强制TS接受这个属性：

<Editor
  spellCheck
  editorState={editorState}
  onEditorStateChange={onEditorStateChange}
  toolbar={toolbar}
  editorStyle={{height: "500px" }}
  blockStyleFn={myBlockStyleFn}
/> as React.ReactElement<EditorProps & { blockStyleFn: typeof myBlockStyleFn }>

不过这种方式不推荐长期使用，因为会失去TypeScript的类型校验优势，还是方案1更规范。

小优化建议 #

另外，你的myBlockStyleFn函数目前只处理了code-block类型，最好加上默认返回值，避免返回undefined可能导致的样式异常：

function myBlockStyleFn(contentBlock: ContentBlock) {
  const type = contentBlock.getType();
  if (type === 'code-block') {
    return 'customBlock';
  }
  // 添加默认返回值，确保函数始终返回字符串
  return '';
}

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