Typescript 类型{}上不存在属性&STORE&A；MobX&A；REACT&A；TYPE脚本

我一直收到错误消息:属性‘store’不存在于类型‘{}’上.在Mobx中使用Next.js时来自TypeScrip.我使用的是带有应用程序路由设置的Next.js v14.1.0.

如何在Next.js中正确定义状态存储的类型？

我的代码的补充说明，目前我的ObservableClickStore是在相同的页面(page.tsx)与Home组件.

Home是一个组件，将再次传递到Games，page.tsx将呈现Games(我不确定这种方法是否有效，似乎是多余的.

// ./src/app/page.tsx

class ObservableClickStore {
  counter: number = 0;
  openedCards: ICard[] = [];
  clickedCards: ICard[] = [];
  nonShuffledCharacters: ICard[] = [
    { text: "Saya", answer: "I", isRevealed: false },
    // clickCard function logic. Removed to make concise...
  ]

  characters = this.nonShuffledCharacters.sort(() => Math.random() - 0.5);
  constructor() {
    makeObservable(this, {
      counter: observable,
      characters: observable,
      clickCard: action,
      toggleIsRevealed: action,
      clearClickedCards: action,
      reset: action,
    });
    autorun(() => console.log(this.report));
  }

  get report() {
    return this.characters;
  }

  toggleIsRevealed = (card: ICard) => {
    const index = this.characters.indexOf(card)
    this.characters[index].isRevealed = !this.characters[index].isRevealed;
  }

  clearClickedCards = () => {
    this.clickedCards = []
  }

  reset = () => {
    // reset function logic. Removed to make concise...
  }

  clickCard = (card: ICard) => {
    // clickCard function logic. Removed to make concise...
  }
}

const observableClickStore = new ObservableClickStore();

const Home = observer(({ store }) => {

  const backside = "🍊";
  const quizCardList = store.characters.map((character: ICard, i: number) =>
    <div className='m-1' key={i}>
      <div onClick={() => store.clickCard(character)}>
        <QuizCard revealCard={character.isRevealed} backside={backside} frontside={character.text} />
      </div>
    </div >
  )

  return (
    <>
      // render HTML...
    <>
})

const Games = () => {
  return <Home store={observableClickStore} />
}

export default Games;