在TypeScript（Next.js）中使用三元运算符(?)报错求助

出现这个错误的核心原因是三元运算符的两个分支必须都有合法的返回/执行内容，不能省略其中一个分支的逻辑。以下是具体的修正方案：

1. 补全三元运算符的空分支 #

如果你的逻辑是满足条件执行A，不满足时什么都不做，需要在空分支位置填写null或空函数占位：
错误写法：

<button onClick={() => isActive ? handleActive() : }>操作按钮</button>

正确写法：

<button onClick={() => isActive ? handleActive() : null}>操作按钮</button>
// 或者用空函数
<button onClick={() => isActive ? handleActive() : () => {}}>操作按钮</button>

2. 改用短路运算符简化逻辑 #

如果你的需求只是"满足条件才执行，不满足则无操作"，用&&短路运算符比三元更简洁，也不会触发错误：

<button onClick={() => isActive && handleActive()}>操作按钮</button>

当isActive为true时，会执行handleActive()；为false时，表达式直接终止，不会执行任何操作。

3. 回调函数直接赋值的场景修正 #

如果是直接给onClick赋值函数的情况，同样要确保两个分支都有函数：
错误写法：

<button onClick={isActive ? handleActive : }>操作按钮</button>

正确写法：

<button onClick={isActive ? handleActive : () => null}>操作按钮</button>

内容的提问来源于stack exchange，提问作者Ted's Projects