类型“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
  };
};

它会引发以下错误： “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 };
};

灵感来自here

Answer 2

这样做看看发生了什么：

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