TypeScript 中的 useParams 不允许解构

Question

我正在关注 this video ("JWTUser Sessions with ReactJS & GraphQL...") when at this time the guy destructures useParams() method from react-router-dom 图书馆。

在我的例子中，这没有用，因为我收到了这个错误：

这是此时的全部代码：

import React, { useState, useContext } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import { useConfirmMutation } from '../gql/generated/graphql';
import { AppStateContext } from './provider';

export const Confirm: React.FC = () => {
    const history = useHistory();
    const { appSetAuthToken, appClearAuthToken, gqlError } = useContext(AppStateContext);

    const [show, setShow] = useState(false);
    const [email, setEmail] = useState('');
    const [confirm] = useConfirmMutation();
    const { token } = useParams();

    const handleFormSubmit = async (e: React.FormEvent) => {
        e.preventDefault();

        try {
            setShow(false);
            appSetAuthToken(token);
            const { data } = await confirm({ variables: email });
        } catch {

        }
    };

    if (token === undefined || token === '')
        return <div>Enlace de confirmación de usuario inválido</div>;

    return (
        <div>
            <div>Página de confirmación de usuario</div>
            {show ? <div>{gqlError.msg}</div> : undefined}
            <form>
                <div>
                    <input
                        value={email}
                        placeholder='Correo electrónico'
                        type='email'
                        onChange={e => { setEmail(e.target.value); }}
                    />
                </div>
                <button type='submit'>Confirmar</button>
            </form>
        </div>
    );
};

我也在 CodeSandbox 上尝试过同样的方法，但它有效。不确定，我的错误在哪里。你能看到那个错误吗？

Answer 1

useParams 是通用的。您需要通过指定泛型的值来告诉打字稿您正在使用哪些参数：useParams<MyParams>();在你的情况下是：

const { token } = useParams<{token?: string}>();

这表示 token 是 string 或 undefined。

Answer 2

是的，typescript 无法解构像 {} 这样的通用普通对象。但是 any 很有魅力。

const { token } = useParams() as any

TypeScript 中的 useParams 不允许解构

useParams in TypeScript does not allow destructuring

javascript

destructuring

typescript

reactjs

react-router