TS 错误：由于 withRouter，类型 'unknown' 不可分配给类型 'FunctionComponent<any>

Posted 2023-02-21

【中文标题】TS 错误：由于 withRouter，类型 \'unknown\' 不可分配给类型 \'FunctionComponent<any>

【英文标题】：TS error: Type 'unknown' is not assignable to type 'FunctionComponent<any> due to withRouterTS 错误：由于 withRouter，类型 'unknown' 不可分配给类型 'FunctionComponent<any>

【发布时间】：2019-12-01 23:39:16

【问题描述】：

我收到这个错误

client:159 [at-loader] ./src/App.tsx:40:46 TS2322：类型“未知”不可分配给类型“FunctionComponent |组件类 |组件类，任意> |功能组件> |不明确的'。 类型 'unknown' 不能分配给类型 'FunctionComponent>'。

在这个组件上：

import React,  FC, useState  from 'react';
import  Provider  from 'react-redux';
import  BrowserRouter, Route, Switch  from 'react-router-dom';
import User from './scenes/user/User';

const store = configureStore();

type IsOpen = boolean;

const App: FC = () => 
  const [sidebarOpen, setSidebarOpen] = useState<IsOpen>(false);

  return (
    <Provider store=store>
      <BrowserRouter>
        <Sidebar
          open=sidebarOpen
          sidebar=<PrimaryNav closeNav=() => setSidebarOpen(false) />
          onSetOpen=setSidebarOpen
          styles= sidebar:  background: 'black'  >
          <Header sidebarOpen=sidebarOpen onSetSidebarOpen=setSidebarOpen />
          <Switch>
            <Route exact=true path='/' component=NewsArticles />
            <Route exact=true path='/user' component=User />
            <Route path='/user/:id' component=User />
          </Switch>
        </Sidebar>
      </BrowserRouter>
    </Provider>
  );
;

export default App;

就这两行

            <Route exact=true path='/user' component=User />
            <Route path='/user/:id' component=User />

这是用户组件：

import React,  FC, useEffect  from 'react';

import  withRouter  from 'react-router-dom';

type Props = 
  match: any;
  history: any;
  location: any;
  withRouter: any;
  fetchUsers?: any;
  users?: UserInfoModel[];
;

const mapState = (state: UsersAppState, props: Props) => 
  return 
    users: state.usersReducers.users,
    ...props
  ;
;

const actionCreators = 
  fetchUsers
;

const User: FC<Props> = props => 
  const  history, users, location, match, fetchUsers  = props;

  const setID = match.params.hasOwnProperty('id') ? match.params.id : 'AbedA';

  const handleFetch = () => 
    return fetchUsers(setID);
  ;

  useEffect(() => 
    if (!users || !users.length) 
      handleFetch();
    
  , []);

  useEffect(() => 
    handleFetch();
  , [location.pathname, match.params.id]);

  return (
    <UserContainer history=history fetchUsers=() => fetchUsers(setID) users=users profilePicture=profileImg />
  );
;

export default compose(
  connect(
    mapState,
    actionCreators
  ),
  withRouter
)(User);

我关于react-router/react-router-dom 的每一件事都带有错误。

如果我删除 withRouter，错误就会消失。

我做错了什么？

【问题讨论】：

您是否尝试过使用打字稿断言basarat.gitbooks.io/typescript/docs/types/type-assertion.html。所以你可以说User as FunctionComponent（未测试）

【参考方案1】：

你可以这样解决错误：

export default compose<React.ComponentType<Props>>(
  connect(
    mapState,
    actionCreators
  ),
  withRouter
)(User);

【参考方案2】：

问题在于 TypeScript 无法为 compose 函数推断正确的类型。所以它使用compose 的most general form，所以结果类型不正确。

你可以通过显式输入compose 来解决这个问题，但我建议不要这样做，因为connect 的返回类型非常复杂。

我建议'手动'编写函数，像这样

withRouter(
    connect(
        mapState,
        actionCreators
    )(User))