在Next.js中使用getServerSideProps时避免条件调用React Hooks

你的问题核心是违反了React Hooks的核心规则：Hooks必须在组件顶层调用，不能放在条件判断、循环或嵌套逻辑里。下面给出两种直接可行的解决方案：

方案一：将Hooks移至组件顶层调用 #

不管是否存在错误，都先在组件最顶部调用所有需要的Hooks，再处理错误逻辑。同时注意避免变量名冲突（原代码中参数num和useState的变量重名，会导致遮蔽问题）：

export const getServerSideProps = async () => {
    // fetch some data...
    if (some_error_condition) {
        return { error: "Something happened" };
    }
    return { props: { num: 123 } };
};

export default function Component({ num, error }) {
    // 移至顶层调用Hooks，给状态变量换个名字避免冲突
    const [localNum, setLocalNum] = useState(num ?? 0); // 可选：给默认值防止num为undefined

    if (error) {
        return <>Error: {error}</>;
    }

    return <>Current num: {localNum}</>;
}

方案二：拆分组件分离错误逻辑 #

把需要使用Hooks的业务逻辑抽成独立子组件，父组件只负责处理错误状态，无错误时再渲染子组件：

export const getServerSideProps = async () => {
    // fetch some data...
    if (some_error_condition) {
        return { error: "Something happened" };
    }
    return { props: { num: 123 } };
};

// 父组件：仅处理错误和路由数据传递
export default function Component({ num, error }) {
    if (error) {
        return <>Error: {error}</>;
    }
    return <NumDisplay initialNum={num} />;
}

// 子组件：专注业务逻辑，Hooks在顶层调用符合规则
function NumDisplay({ initialNum }) {
    const [localNum, setLocalNum] = useState(initialNum);
    return <>Current num: {localNum}</>;
}

为什么原代码会报错？ #

React依赖Hooks的调用顺序来跟踪每个状态的对应关系，条件调用会破坏这个顺序，导致React无法正确管理组件状态，因此必须保证每次渲染时Hooks的调用顺序完全一致。

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