如何解决TypeScript中‘Object possibly null’错误？附Draft.js场景案例

嘿，我刚好碰到过类似的问题，咱们来搞定它！

你遇到的Object is possibly null错误，核心原因是TypeScript没有正确推断出editor.current的类型。默认情况下，useRef(null)会被推断为MutableRefObject<null>，就算你加了空检查，TS还是没法确定editor.current的具体类型（也就是Draft.js编辑器实例的类型）。

解决方案：给useRef指定正确的类型 #

首先，你需要从Draft.js导入编辑器实例的类型EditorInstance，然后给useRef显式声明类型。这样TS就能准确识别editor.current的类型，空检查之后就不会报错了。

修改后的完整代码如下：

import React from 'react';
import { Editor, EditorState, EditorInstance } from 'draft-js'; // 新增导入EditorInstance

export default () => {
  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );
  // 显式指定ref的类型为EditorInstance | null
  const editor = React.useRef<EditorInstance | null>(null);

  function focusEditor() {
    // 简化空检查逻辑，只要current不存在就终止或抛出错误
    if (!editor.current) {
      throw new Error('Editor ref is not initialized');
    }
    editor.current.focus(); // 这里不会再报类型错误啦！
  }

  React.useEffect(() => {
    focusEditor()
  }, []);

  return (
    <div onClick={focusEditor}>
      <Editor ref={editor} editorState={editorState} onChange={setEditorState} />
    </div>
  );
}

为什么这样有效？ #

• EditorInstance是Draft.js提供的编辑器实例类型，它包含了focus()等方法的定义。
• 给useRef指定EditorInstance | null的类型后，TypeScript会知道：当editor.current不为null时，它一定是一个拥有focus()方法的编辑器实例，所以不会再提示“可能为null”的错误。

额外小提示 #

如果你不想显式导入EditorInstance，也可以用类型断言快速解决，但这种方式不如指定类型严谨：

(editor.current as EditorInstance).focus();

不过更推荐前面的显式类型声明，这样代码可读性和类型安全性都更高。

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