React自定义useCookies Hook调用getCookie误触发setCookie无法编译

1. 自定义Hook返回值的类型推导错误
   你在useCookies中返回[getCookie, getAllCookies, setCookie, deleteCookie, deleteAllCookies]时，TypeScript默认会将其推导为可变数组，所有元素的类型被统一合并为五个函数的联合类型。在Login组件解构const [getCookie] = useCookies()时，TS无法识别第一个元素就是仅需1个入参的getCookie，会认为它可能是需要至少2个入参的setCookie，调用时仅传1个参数就会触发类型不匹配的编译错误。你感知到的“调用getCookie触发setCookie执行”实际是编译阶段的类型校验报错，并非运行时真的执行了setCookie。
2. Login组件返回值缺失
   你声明Login组件的返回类型为JSX.Element，但函数体中只有console.log语句，没有返回任何合法的JSX内容，也会触发编译报错。

方案1：添加as const断言（最简方案） #

在useCookies的返回数组后添加as const，让TypeScript将返回值识别为固定长度的元组，每个位置的函数类型会精准匹配：

// useCookies.tsx 末尾修改return语句
return [getCookie, getAllCookies, setCookie, deleteCookie, deleteAllCookies] as const;

方案2：显式定义返回类型 #

也可以直接给useCookies声明返回类型，更明确的约束类型规则：

// useCookies.tsx 函数定义处修改
export default function useCookies(): [
  (name: string) => string,
  () => { [key: string]: string },
  (name: string, value: string, expiresOrOptions?: number | Date | any, path?: string, domain?: string, secure?: boolean, sameSite?: 'Lax' | 'None' | 'Strict') => void,
  (name: string, path?: string, domain?: string, secure?: boolean, sameSite?: 'Lax' | 'None' | 'Strict') => void,
  (path?: string, domain?: string, secure?: boolean, sameSite?: 'Lax' | 'None' | 'Strict') => void
] {
  // 原有函数逻辑保持不变
}

修复Login组件返回值 #

补充Login组件的JSX返回内容：

export default function Login(): JSX.Element {
  const [getCookie] = useCookies();
  console.log('getCookie',getCookie('isLoggedIn'));
  // 补充返回的JSX内容
  return <div>登录页面</div>;
}

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