Docusaurus自定义插件中使用React Hooks报错求助

你的问题核心是组件导入方式错误，导致React无法识别CustomTOC为合法的函数组件，进而触发Hook调用违规报错。

问题根源 #

在theme/index.tsx中，你用解构语法导入了默认导出的CustomTOC组件：

import {CustomTOC} from './CustomTOC'

而CustomTOC.tsx是默认导出（export default function CustomTOC），这种导入方式会导致CustomTOC拿到的是undefined或错误引用，最终<CustomTOC {...props} />被当作普通函数执行，而非React组件渲染。此时调用useState就违反了Hook必须在React组件/自定义Hook中调用的规则，触发"无效React Hook"错误。

修复步骤 #

1. 修改theme/index.tsx的导入语句，改为默认导入：

import React from 'react'
import CustomTOC from './CustomTOC' // 去掉解构语法

const WrappedTOC = (props: any) => {
    return (
      <CustomTOC {...props} />
    );
};

export default WrappedTOC;

2. 确认CustomTOC.tsx中的Hook调用在组件顶层（你的代码已经符合要求，取消注释useState即可正常运行）：

import React, { useState } from 'react';
import TOC from '@theme-init/TOC';

export default function CustomTOC(props: any) {
  const [tags, setTags] = useState<any[]>([]); // 现在可以正常启用

  return (
    <>
      <TOC {...props} />
      Hello world 
    </>
  );
}

额外检查点 #

如果修复后仍有问题，可排查：

• 检查项目中是否存在多版本React实例：执行npm ls react或yarn list react，确保所有依赖的React版本一致
• 确保Hook调用始终在函数组件的顶层，不要放在条件判断、循环或嵌套函数内

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