属性 'store' 在类型 'NextPageContext' 上不存在

Question

我们正在尝试将我们的 NextJs 项目从 JS 移动到 TS，但在这样做时我遇到了以下问题。

我的 _app.tsx 中的 getInitialProps 是这样的：

    static async getInitialProps({ router, ctx, Component }) { 
    const { req, isServer, store, res, query } = ctx;
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    return { pageProps, isServer, router, store };
  }

但是当我尝试访问像这样的功能组件中的商店时：

SupportHome.getInitialProps = async ({ query, store, isServer }) => {
  store.dispatch(getCategory());
  return {
    isServer,
    store
  };
};

它抛出以下错误：属性 'store' 在类型 'NextPageContext' 上不存在并且属性 'isServer' 在类型 'NextPageContext' 上不存在谁能帮我解决这个问题？

Answer 1

执行此操作以查看发生了什么：

SupportHome.getInitialProps = async (something) => {
  console.log(something)
  //store.dispatch(getCategory());
  //return {
   // isServer,
  //  store
  //};
};

如果这是您所看到的，那么您想要的属性似乎在 props 子项上：

props: { err: xx, req: IncomingMessage { ...something }, res: ServerResponse { ...something }, pathname: '/ComponentName', query: {}, asPath: '/xyz/', AppTree: [Function: AppTree], store: { dispatch: [Function], subscribe: [Function: subscribe], getState: [Function: getState], replaceReducer: [Function: replaceReducer], runSagaTask: [Function], sagaTask: [Object], [Symbol(observable)]: [Function: observable] }, isServer: true }

您可能将错误的对象传递给此函数，所以错误是在上游。

SupportHome.getInitialProps = async ({props}) => {
  console.log(props)
  const { store, isServer, store } = props
  store.dispatch(getCategory());
  return {
    isServer
    store
  };
};

Answer 2

已解决问题。基本上 NextPageContext 在其接口中定义了以下字段：

export interface NextPageContext {
    /**
     * Error object if encountered during rendering
     */
    err?: (Error & {
        statusCode?: number;
    }) | null;
    /**
     * `HTTP` request object.
     */
    req?: IncomingMessage;
    /**
     * `HTTP` response object.
     */
    res?: ServerResponse;
    /**
     * Path section of `URL`.
     */
    pathname: string;
    /**
     * Query string section of `URL` parsed as an object.
     */
    query: ParsedUrlQuery;
    /**
     * `String` of the actual path including query.
     */
    asPath?: string;
    /**
     * `Component` the tree of the App to use if needing to render separately
     */
    AppTree: AppTreeType
}

所以我简单地扩展了我的 _app.tsx 中的界面。像这样：

import {Store} from "redux";

export interface MyPageContext extends NextPageContext {
  store: Store;
  isServer: boolean;
}

现在，每当我必须在任何功能组件中使用 getInitialProps 时，我都会这样称呼它：

HelpDesk.getInitialProps = async (props: MyPageContext) => {
  const { query, store } = props;
  store.dispatch(getCategory());
  return { query };
};

灵感来自 here

属性 'store' 在类型 'NextPageContext' 上不存在

Property 'store' does not exist on type 'NextPageContext'

typescript

next.js