Reactjs 类型子元素缺少具有Nextjs+；使用TypeScript响应上下文

将Reacts Context与Nextjs和TypeScript一起使用会在

\u app.tsx

周围显示一个模糊的错误包装上下文

事件虽然我正在将值传递给上下文提供程序，但它给出了错误：

类型“{children:Element；}”缺少类型“ContextProps”中的以下属性：capturedPokemons、catchPokemon、releasePokemon

这是我的

\u app.tsx

函数MyApp（{Component，pageProps}:AppProps）{
返回(
);
}

以下是上下文：

type pokemonrops={
编号：字符串；
名称：字符串；
图像：字符串；
};
类型ContextProps={
捕获者：口袋妖怪[]；
捉住口袋妖怪：（新口袋妖怪：口袋妖怪[]）=>void；
releasePokemon:（id:string）=>void；
};
const CaughtContext=createContext({
CapturedBookMons:[]，
小精灵：（）=>未定义，
releasePokemon:（）=>未定义，
});
export const usecapt=（）=>useContext（CaughtContext）；
export const CaughtProvider:React.FC=（{children}）=>{
const[capturedPokemons，setCapturedPokemons]=useState（[]）；
const catchPokemon=（新口袋妖怪：pokemonops[]）=>{
如果（capturedPokemons.length>=6）{
警惕（'你不能再携带任何口袋妖怪'）；
返回；
}
const alreadyCaptured=capturedPokemons.some(
（p:pokemonops）=>p.name==newPokemon[0]。name
);
如果（已捕获）{
警惕（“你已经有了那个口袋妖怪”）；
返回；
}
if（window.confirm（'Capture Pokemon'））{
setCapturedPokemons（[…capturedPokemons，…newPokemon]）；
}
};
返回(
{儿童}
);
};

---

该应用程序工作正常，正如我所知，这是在无需TypeScript的普通React/JS中完成的。

您需要为

CaughtProvider使用单独的类型。

type CaughtProviderProps = {
children: React.ReactNode
}

并将其用作

CaughtProvider: React.FC<CaughtProviderProps>

CaughtProvider:React.FC

ContextProps

用于您的

上下文值

，因此将其用于

CaughtProvider

是不对的

CaughtProvider

只是一个组件，它接受

子类

属性。所以最好有一个单独的类型