TypeScript中useParams返回值传入client.patch报ts(2345)类型错误

React Router的useParams Hook默认无法保证当前路由一定携带声明的路径参数，因此返回的参数值类型为string | undefined；而Sanity客户端的patch方法入参仅接受string | MutationSelection类型，不接受undefined值，因此触发TS2345类型校验错误。

方案1：类型收窄（推荐，无类型安全隐患） #

在执行Sanity更新逻辑前，先判断pinId是否存在，不存在时直接终止函数执行，TS会自动将后续代码块中的pinId类型收窄为string，完全匹配入参要求。
修改后的代码如下：

const PinDetail: React.FC<PropsType> = ({ user }) => {
  const { pinId } = useParams()

  const addComment = () => {
    // pinId不存在时直接返回，避免无效调用
    if (!pinId) return

    client.patch(pinId)
      .setIfMissing({ comments: [] })
      .insert('after', 'comments[-1]', [{
        comment,
        _key: uuidv4(),
        postedBy: {
          _type: 'postedBy',
          _ref: user._id
        }
      }])
      .commit()
      .then(() => {
        fetchPinDetail()
        setComment('')
        setAddingComment(false)
      })
  }
}

注：原代码中fetchPinDetail()后误用逗号运算符连接后续状态更新逻辑，已修正为正常的语句分隔写法，避免隐藏逻辑问题。

方案2：非空断言（仅适合参数100%存在的场景） #

如果可以完全保证PinDetail组件只会在携带pinId的路由下渲染，不存在pinId为undefined的可能，可以使用TS非空断言!手动标记参数非空，跳过类型检查。
示例代码：

// 调用patch时给pinId加非空断言
client.patch(pinId!)

注意：非空断言属于强制绕过TS校验的写法，一旦出现pinId为空的场景，会直接触发Sanity接口的运行时错误，无特殊情况优先使用方案1。

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