TypeScript NextJS报错：Rendered fewer hooks than expected排查求助

你的问题出在将组件直接存储在useState中的做法上。React要求组件树中Hook的执行顺序必须稳定，而你通过state切换组件的方式，会导致React在卸载旧组件、挂载新组件时，若新旧组件的Hook数量不一致，就触发这个错误。

错误原因分析 #

你当前把Content、Feedback组件存在content state里，然后直接渲染{content}。这种方式违背了React的状态管理原则——state应该存储的是状态值（比如索引、布尔值等），而非组件本身。当你调用setContent切换组件时，React会完全卸载旧组件并挂载新组件，若子组件（Content/Feedback）包含Hooks，就可能出现Hook执行数量不匹配的问题。

修复方案 #

去掉content这个state，直接通过active索引来渲染对应的组件：

"use client";
import React, { useState } from 'react';
import Content from './ItemsContent';
import Feedback from './Feedback';

export default function Tab(props: { tabs: string[] }) {
    const [active, setActive] = useState(0);
    const possibleContent = [Content, Feedback];

    const changeTab = (index: number) => {
        if (possibleContent.length > index) {
            setActive(index);
        } else {
            // 提示内容不可用的逻辑
        }
    }

    // 根据active索引获取当前要渲染的组件
    const CurrentContent = possibleContent[active];

    return (
        <div className="w-full pt-4 h-full bg-[rgb(15,15,15)] rounded-t-xl">
            <div className="flex justify-around">
                {props.tabs.map((tab, index) => {
                    return (
                        <div 
                            key={index} 
                            onClick={() => changeTab(index)} 
                            className={`text-center text-lg cursor-pointer ${index === active ? 'bg-[rgb(25,25,25)]' : 'hover:bg-[rgb(25,25,25)]'} ${possibleContent.length > index ? '' : 'text-slate-700'} px-4 pb-2 pt-2 rounded-t-lg`}
                        >
                            {tab}
                        </div>
                    )
                })}
            </div>
            {/* 直接渲染组件，而非从state读取 */}
            <CurrentContent />
        </div>
    )
}

关键改动点 #

• 删除了存储组件的content state，不再将组件实例作为状态值
• 通过active索引直接从possibleContent数组中获取当前要渲染的组件
• 采用<CurrentContent />的标准组件渲染方式，让React能正确追踪组件的Hook执行流程

这种方式保证了组件渲染的稳定性，React能正确追踪子组件的Hook执行顺序，不会再出现Hook数量不匹配的错误。

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