javascript - TS2339：类型“{}”上不存在属性“id”

Question

我有一个带有 Material-UI 的 React 表单。我想使用从 URL 链接获取 iduseParams并发出一些 API 请求以填充表单数据：

http://localhost:3001/ticket-profile/9459377

主app.tsx：

function App() {
  return (
      <Router>
        <Navbar />
        <Switch>
          <Route path='/ticket-profile/:id' component={TicketProfile} />
        </Switch>
      </Router>
  );
}

我使用此代码打开一个新页面并传递id参数：

history.push(`/ticket-profile/${id}`)

我需要将数据放入此页面：

export default function TicketProfile(props: any) {
    let { id } = useParams();
    
    const [ticket, setTicket] = useState<TicketDTO[]>([]);

    useEffect(() => {
        getSingleTicket();    
    }, []);

    const getSingleTicket = async () => {
        getTicket(id)
            .then((resp) => {
                setTicket(resp.data);               
    }

但是对于这条线let { id }，我得到：

TS2339: Property 'id' does not exist on type '{}'.

你知道我该如何解决这个问题吗？

标签： javascriptreactjstypescriptreact-routerreact-router-dom

Answer 1

使用带有typescript的React Router建议您需要通过您所期望的。

从页面：

useParams()方法返回一个对象，直接取属性TS会提示空对象中不存在该属性。根据TS的规范，可以在动态路由组件中定义一个接口来定义路由的参数。

例子：

// Home.tsx
interface RouteParams {
    id: string
}
export default () => {
    const params = useParams<RouteParams>();
    return (
        <div>
            { params.id }
        </div>
    )
}

用这个：

 let { id } = useParams<{id: string}>();