使用docusaurus-plugin-openapi-docs时遇useTabGroupChoice Hook调用错误求助

针对你在使用docusaurus-plugin-openapi-docs运行petstore示例时遇到的这个错误，这里提供几个可行的排查和解决步骤：

• 检查插件与Docusaurus版本兼容性
  不同版本的docusaurus-plugin-openapi-docs对Docusaurus核心版本有依赖要求，比如部分新版本插件仅支持Docusaurus 2.4+。查看项目package.json，确认两者版本匹配，若不匹配，升级或降级到兼容的版本组合。

• 确保插件配置完整
  打开docusaurus.config.js，检查插件配置是否正确引入了所需的主题扩展。需确保presets包含@docusaurus/preset-classic，plugins中正确配置docusaurus-plugin-openapi-docs，且@docusaurus/theme-openapi-docs已安装并添加到themes中。示例配置片段：

  module.exports = {
    presets: [
      '@docusaurus/preset-classic',
    ],
    plugins: [
      [
        'docusaurus-plugin-openapi-docs',
        {
          id: 'openapi',
          docsPluginId: 'classic',
          config: {
            petstore: {
              specPath: './openapi/petstore.yaml',
              outputDir: './docs/petstore',
              sidebarOptions: {
                groupPathsBy: 'tag',
              },
            },
          },
        },
      ],
    ],
    themes: ['@docusaurus/theme-openapi-docs'], // 必须添加该主题
  };
  

• 清除缓存并重新构建
  缓存残留可能导致组件加载异常，执行以下命令清理缓存后重启服务：

  npx docusaurus clear
  npx docusaurus start
  

• 检查自定义布局是否破坏了Provider包裹
  如果你自定义了文档页面布局组件（比如修改了src/theme/DocPage.js），需确保原有的TabGroupChoiceProvider被保留在布局层级中。若自定义布局移除了这个Provider，会触发该错误，此时需要手动添加Provider包裹：

  import { TabGroupChoiceProvider } from '@docusaurus/theme-openapi-docs';
  
  function DocPage(props) {
    return (
      <TabGroupChoiceProvider>
        {/* 你的布局内容 */}
        {props.children}
      </TabGroupChoiceProvider>
    );
  }
  

• 重新安装依赖
  尝试删除node_modules和package-lock.json（或yarn.lock），然后重新安装所有依赖，排除依赖安装不完整的问题：

  rm -rf node_modules package-lock.json
  npm install
  

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