“NextPageContext”类型上不存在属性“store”

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

它引发以下错误：“NextPageContext”类型上不存在属性“store”，“NextPageContext”类型上不存在属性“isServer” 谁能帮我解决这个问题？

Answer 1

修复了问题。基本上 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 };
};

从这里获得灵感