TypeScript解码JWT遇「Object is possibly undefined」错误求助

错误原因 #

你已经通过if (decoded)确保了decoded不为null，但TypeScript仍报错，核心原因有两个：一是JwtPayload类型中的exp字段属于可选属性，即使decoded存在，exp也可能未定义；二是jwt_decode的返回值类型本身可能包含undefined，虽然你加了|| null，但类型推断没完全覆盖到。

修复方案 #

方案1：增加exp存在性检查

直接在判断时确认exp存在，同时避免运行时错误：

import jwt_decode, { JwtPayload } from "jwt-decode";
if (token) {
  const decoded = jwt_decode<JwtPayload>(token) || null;

  if (decoded) {
    const currentTime = Date.now() / 1000;
    // 先检查exp是否存在，再做时间对比
    if (decoded.exp && decoded.exp < currentTime) {
      dispatch(logout());
      localStorage.removeItem("token");
      setLoading(false);
    }
  }
}

方案2：自定义必填exp的JWT类型

如果你的业务中所有有效JWT都包含exp字段，可以自定义类型覆盖默认的JwtPayload，强制exp为必填：

import jwt_decode, { JwtPayload } from "jwt-decode";

// 自定义类型，让exp成为必填字段
interface CustomJwtPayload extends JwtPayload {
  exp: number;
}

if (token) {
  const decoded = jwt_decode<CustomJwtPayload>(token) || null;

  if (decoded) {
    const currentTime = Date.now() / 1000;
    // 此时TypeScript会认为exp一定存在，不会报错
    if (decoded.exp < currentTime) {
      dispatch(logout());
      localStorage.removeItem("token");
      setLoading(false);
    }
  }
}

方案3：使用非空断言（谨慎使用）

如果你能100%保证所有合法token都包含exp字段，可以用非空断言!告诉TypeScript该字段一定存在：

import jwt_decode, { JwtPayload } from "jwt-decode";
if (token) {
  const decoded = jwt_decode<JwtPayload>(token) || null;

  if (decoded) {
    const currentTime = Date.now() / 1000;
    // 非空断言，仅当确定exp必存在时使用
    if (decoded.exp! < currentTime) {
      dispatch(logout());
      localStorage.removeItem("token");
      setLoading(false);
    }
  }
}

额外优化 #

你代码里的token || ""没必要，因为外层已经判断了if (token)，直接传token即可。

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