TS2345:SetStateAction<string|null>无法赋值给string参数问题解决

• 错误核心是loginHandler的入参类型标注不当：你使用了React.SetStateAction<string | null>作为参数类型，这个类型是React为useState返回的状态更新函数（即代码里的setToken）专门设计的入参类型，它既包含string | null的直接值类型，还包含(prevState: string | null) => string | null的更新函数类型。
• localStorage.setItem方法的第二个参数明确要求传入string类型，既不接受null值，也不接受函数类型的参数，TypeScript检测到传入的参数类型可能包含不合法的null和函数类型，因此抛出TS2345类型不匹配错误。
• 从业务逻辑上看，登录成功后触发loginHandler时，传入的必然是Firebase返回的有效字符串token，不存在传null或者更新函数的场景，这个类型标注本身不符合实际业务逻辑。

方案一：修正入参类型（推荐，适配绝大多数登录场景） #

直接将loginHandler的入参类型标注为string，匹配登录流程传入的实际参数类型，同时补全登出时清除本地存储的逻辑，代码如下：

const initialToken = localStorage.getItem('token');
// 明确标注state的类型，避免TS类型推断异常
const [token, setToken] = useState<string | null>(initialToken);

const loginHandler = (token: string) => {
  setToken(token);
  localStorage.setItem('token', token);
};

const logoutHandler = () => {
  setToken(null);
  // 登出时记得清除本地存储的token，避免残留
  localStorage.removeItem('token');
};

方案二：兼容函数式更新场景（特殊需求使用） #

如果你确实需要loginHandler支持和setToken一样的函数式更新能力，需要先解析出入参对应的最终token值，做类型判断后再操作本地存储，代码如下：

const initialToken = localStorage.getItem('token');
const [token, setToken] = useState<string | null>(initialToken);

const loginHandler = (tokenArg: React.SetStateAction<string | null>) => {
  setToken(prevToken => {
    // 计算最终要更新的token值
    const newToken = typeof tokenArg === 'function' ? tokenArg(prevToken) : tokenArg;
    // 根据token值的类型操作本地存储
    if (typeof newToken === 'string') {
      localStorage.setItem('token', newToken);
    } else {
      localStorage.removeItem('token');
    }
    return newToken;
  });
};

注意：普通登录场景优先选择方案一即可，代码更简洁，类型更清晰，没有额外的冗余判断。方案二仅在特殊场景下需要兼容函数式更新时使用。

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