【TS】不能将类型“string | string[]”分配给类型“string”

9,427 阅读1分钟

❤️ 原文地址 ❤️

获取路由参数id值,然后接口传参时候提示:不能将类型“string | string[]”分配给类型“string”

获取路由参数:

获取到的 paramIdstring | string[] 类型

接口参数是 string 类型

const paramId=router.currentRoute.value.params?.id as string;
//这样可以解决报错,但是后续查询参数是数组,运行会错误

按我现在的场景 路由传参(/path/:id)这样也是OK的,但是后面处理问号传参数的时候可能会有问题

router.currentRoute.value打印:

# 路由: /path/aa (/path/:id)
params: {id'aa'} 
# 路由: /path/aa/bb (/path/:id/:id)
params: {id'bb'} 
# 路由: /path/aa?id=11 (/path/:id)
query: {id'11'}
# 路由: /path/aa?id=11&id=22 (/path/:id)
query: {id: ['11''22']}
# 路由: /path/aa?id=&id= (/path/:id)
query: {id: ['''']}

所以写个工具方法:

//调用
const paramsId=getRouterParamsVal(router.currentRoute.value.params?.id);
const queryId=getRouterParamsVal(router.currentRoute.value.query?.id);

// utils.ts --- 获取路由参数值,可以兼容不传传多个,as 类型可以 加多个动态参数
export function getRouterParamsVal(params:string|string[]|LocationQueryValue | LocationQueryValue[]){
  return params?(Array.isArray(params) ? params[0] as string : params as string):''
}

不报错了,暂时这样修改,后面有好办法再优化吧~😄