TS2339：类型“{}”上不存在属性“id”答案

【问题标题】：TS2339: Property 'id' does not exist on type '{}'TS2339：类型“{}”上不存在属性“id”
【发布时间】：2021-11-24 03:25:39
【问题描述】：

我有一个带有 Material-UI 的 React 表单。我想使用 useParams 从 URL 链接中获取 id 并发出一些 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 '{}'.

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

【问题讨论】：

试试useParams<{id: string}>() 或类似的东西
你必须在Router的TicketProfile的props中传递id路由参数

标签： javascript reactjs typescript react-router react-router-dom

【解决方案1】：

将 React Router 与 typescript 一起使用表明您需要通过您所期望的。

从页面：

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}>();

【讨论】：