Next.js中出现Cannot read property 'getIn' of undefined错误求解决

DevOps 小满

2026-7-17

修复Draft.js在Next.js中出现的“Cannot read property 'getIn' of undefined”错误

这个错误是Draft.js的Editor组件在Next.js服务端渲染（SSR）过程中，因依赖浏览器环境的对象未初始化，导致内部Immutable状态调用getIn方法时抛出的。输入内容触发组件状态更新时，未初始化的属性被访问，从而触发错误。

修复方案1：动态导入Editor并禁用SSR

利用Next.js的dynamic导入功能，让Editor组件仅在客户端加载，避免服务端渲染的环境冲突：

import React from "react";
import { EditorState } from "draft-js";
import "draft-js/dist/Draft.css";
import Head from "next/head";
import dynamic from 'next/dynamic';

// 动态导入Editor组件，禁用服务端渲染
const Editor = dynamic(() => import('draft-js').then(mod => mod.Editor), {
  ssr: false,
  loading: () => <div>加载编辑器中...</div> // 可选加载提示
});

export default function MyEditor() {
  const [editorState, setEditorState] = React.useState(() =>
    EditorState.createEmpty()
  );

  const editor = React.useRef(null);
  function focusEditor() {
    if (editor.current) { // 增加空值判断，避免服务端渲染时的调用错误
      editor.current.focus();
    }
  }

  return (
    <>
      <Head>
        <meta charset="utf-8" />
      </Head>
      <div
        style={{ border: "1px solid black", minHeight: "6em", cursor: "text" }}
        onClick={focusEditor}
      >
        <Editor
          ref={editor}
          editorState={editorState}
          onChange={setEditorState}
          placeholder="Write something!"
        />
      </div>
    </>
  );
}

修复方案2：延迟初始化EditorState

通过useEffect在客户端组件挂载后再初始化EditorState，确保状态仅在浏览器环境中创建：

import React, { useState, useEffect } from "react";
import { Editor, EditorState } from "draft-js";
import "draft-js/dist/Draft.css";
import Head from "next/head";

export default function MyEditor() {
  const [editorState, setEditorState] = useState(null);

  useEffect(() => {
    // 仅在客户端初始化编辑器状态
    setEditorState(EditorState.createEmpty());
  }, []);

  const editor = React.useRef(null);
  function focusEditor() {
    if (editor.current) {
      editor.current.focus();
    }
  }

  // 编辑器未初始化时显示加载提示
  if (!editorState) {
    return <div>加载编辑器中...</div>;
  }

  return (
    <>
      <Head>
        <meta charset="utf-8" />
      </Head>
      <div
        style={{ border: "1px solid black", minHeight: "6em", cursor: "text" }}
        onClick={focusEditor}
      >
        <Editor
          ref={editor}
          editorState={editorState}
          onChange={setEditorState}
          placeholder="Write something!"
        />
      </div>
    </>
  );
}

方案说明

方案1从根源解决SSR与Draft.js的兼容性问题，确保Editor组件完全在客户端环境运行。
方案2通过延迟状态初始化，避免服务端渲染时生成的状态与客户端不匹配，进而引发内部属性访问错误。

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

Next.js中出现Cannot read property 'getIn' of undefined错误求解决

修复方案1：动态导入Editor并禁用SSR #

修复方案2：延迟初始化EditorState #

方案说明 #

修复方案1：动态导入Editor并禁用SSR

修复方案2：延迟初始化EditorState

方案说明