Next.js useContext引入报错：找不到Context.jsx的声明文件

数据老陈

2026-8-22

问题原因及解决办法

原因

你在TypeScript项目中引入了.jsx后缀的文件，TypeScript无法自动识别该模块的类型，默认将其标记为any类型；而你的TS配置里大概率开启了noImplicitAny规则（TS默认开启），所以触发了这个类型检查错误。

解决办法

方法一：将文件转为TSX格式（推荐）

把Context.jsx重命名为Context.tsx，并补充类型定义，让TS能正确推断类型：

import React, { createContext, useState, useEffect, useContext } from "react";

// 定义博客数据的类型接口，根据实际返回字段补充
interface Blog {
  _id: string;
  title: string;
  content: string;
  // 其他字段...
}

// 给Context指定类型，初始值设为null
const Context = createContext<Blog[] | null>(null);

const Provider = ({ children }: { children: React.ReactNode }) => {
    const [code, setCode] = useState<Blog[] | null>(null);

    useEffect(() => {
        const fetchBlogs = () => {
            fetch(`https://node-test-mongo.herokuapp.com/api/blog`)
                .then((response) => response.json())
                .then((data) => {
                    setCode(data.blogs)
                })
                .catch((error) => console.log("An error occured"));
        };

        fetchBlogs();
    }, []);

    return <Context.Provider value={code}>{children}</Context.Provider>;
};

export const useCoder = () => useContext(Context);

export default Provider;

方法二：添加类型声明文件

如果不想修改文件后缀，在Context.jsx同目录下创建Context.d.ts文件，手动声明模块类型：

import React from "react";

interface Blog {
  _id: string;
  title: string;
  content: string;
  // 其他字段...
}

declare module "./Context.jsx" {
  const Provider: React.FC<{ children: React.ReactNode }>;
  const useCoder: () => Blog[] | null;
  export default Provider;
  export { useCoder };
}