TypeScript类型不兼容问题：string|null转string的标准化方案问询

针对你遇到的TypeScript类型错误Argument of type 'string | null' is not assignable to parameter of type 'string'，以下是几种标准化的解决思路：

1. 提前判断，跳过无效请求 #

如果jwt为null时不需要调用购物车接口（比如用户未登录状态），直接跳过dispatch即可，这是最合理的处理方式：

useEffect(() => {
  if (jwt) {
    dispatch(getShoppingCart(jwt));
  }
}, [jwt, dispatch]);

既解决了类型不匹配问题，还避免了无意义的API请求。

2. 空值合并运算符简化赋值 #

用??空值合并运算符替代三元运算符，语法更简洁，语义更明确（仅在值为null/undefined时返回默认值）：

useEffect(() => {
  dispatch(getShoppingCart(jwt ?? ''));
}, [jwt, dispatch]);

3. 修改Thunk参数类型，内部处理空值 #

把Thunk的参数类型改为string | null，将空值处理逻辑封装在Thunk内部，符合Redux职责分离的原则，组件代码更干净：

export const getShoppingCart = createAsyncThunk(
  "shoppingCart/getShoppingCart",
  async (jwt: string | null, thunkAPI) => {
    // 空jwt时直接返回空数组或抛出错误
    if (!jwt) {
      return [];
      // 若需触发rejected状态，可抛出错误：
      // throw new Error("用户未登录，无法获取购物车");
    }
    const { data } = await axios.get(
      `https://e9e0fde5-0f50-4037-af58-6b187be97f69.mock.pstmn.io/shoppingCart`,
      {
        headers: {
          Authorization: `bearer ${jwt}`,
        },
      }
    );
    return data.shoppingCartItems;
  }
);

调用时直接传入jwt即可，无需额外转换：

useEffect(() => {
  dispatch(getShoppingCart(jwt));
}, [jwt, dispatch]);

4. 非空断言（谨慎使用） #

如果你能保证jwt在该effect执行时绝对不为null（比如组件仅在用户登录后渲染），可以使用非空断言!：

useEffect(() => {
  dispatch(getShoppingCart(jwt!));
}, [jwt, dispatch]);

注意：非空断言会跳过TypeScript的类型检查，若运行时jwt为null会导致报错，仅在确定值非空的场景下使用。

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