我的打字稿和 useParam 的钩子有一些错误

Question

useParam 返回字符串 |未定义，但该函数需要一个字符串 |突变选择。 我有错误An argument of type "string | undefined" cannot be assigned to a parameter of type "string | MutationSelection". The type "undefined" cannot be assigned to the type "string | MutationSelection".ts(2345)。

这是我的代码

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

  const { pinId } = useParams()

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

Answer 1

在调用client.patch之前，您需要检查pinId是否未定义

Answer 2

我看到了两种解决方法：

1. 只需在addComment 函数中添加if 条件

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

1. 或者在外面处理这个addComment

const { pinId } = useParams();

if (!pinId) {
  throw new Error('Unexpected undefined pin id');
}

这里我抛出错误以确保pinId 将在addComment 中定义，但您可以以不同的方式处理。例如，您可以将用户重定向到另一个路由或在 JSX 中返回错误消息。