React+TS开发遇TS2339/TS7006错误：Context属性不存在等问题求助

问题根源 #

1. Context初始化时未指定类型，TS将其推断为空对象{}，无法识别users、loading、fetchUsers属性
2. users.map中的user未明确类型，导致隐式any错误

具体修改方案 #

1. 完善Context的类型定义（修改context文件）

在githubContext.tsx中，先定义Context值的类型接口，再给createContext指定正确类型：

import { createContext, useState, ReactNode } from "react";

// 定义User接口（根据GitHub API返回的用户结构补充属性）
export interface User {
  id: number;
  login: string;
  avatar_url: string;
  // 其他需要的属性
}

// 定义Context值的类型
interface GithubContextValue {
  users: User[];
  loading: boolean;
  fetchUsers: () => Promise<void>;
}

// 初始化Context并指定类型，提供符合类型的默认值
const GithubContext = createContext<GithubContextValue>({
  users: [],
  loading: true,
  fetchUsers: async () => {} // 默认空实现，避免Provider未包裹时报错
});

interface GithubContextProps {
  children: ReactNode;
}

export const GithubProvider = ({ children }: GithubContextProps) => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  const fetchUsers = async () => {
    const response = await fetch(`${import.meta.env.VITE_GITHUB_URL}/users`, {
      headers: {
        Authorization: `token ${import.meta.env.VITE_GITHUB_TOKEN}`,
      },
    });

    const data = await response.json();
    setUsers(data);
    setLoading(false);
  };

  return (
    <GithubContext.Provider
      value={{
        users,
        loading,
        fetchUsers
      }}
    >
      {children}
    </GithubContext.Provider>
  );
};

export default GithubContext;

2. 修复UserResults组件的类型与逻辑问题

在UserResults.tsx中，导入User接口，并修正useEffect的依赖项：

import { useEffect, useContext } from "react";
import GithubContext, { User } from "../../context/github/githubContext";
import UserItem from "./UserItem";
import Spinner from "../layout/Spinner";

function UserResults() {
  const { users, loading, fetchUsers } = useContext(GithubContext);

  // 添加空依赖数组，避免无限循环调用fetchUsers
  useEffect(() => {
    fetchUsers();
  }, []);

  if (!loading) {
    return (
      <div className="grid grid-cols-1 gap-8 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2">
        {users.map((user: User) => { // 明确user类型（或依靠TS自动推断）
          return <UserItem key={user.id} userData={user} />;
        })}
      </div>
    );
  } else {
    return <Spinner />;
  }
}

export default UserResults;

关键说明 #

• 给createContext指定明确的类型接口是解决属性不存在错误的核心
• 定义User接口不仅解决了隐式any问题，还能获得TS的类型提示
• 给useEffect添加空依赖数组，避免组件重复渲染导致的API频繁调用

内容的提问来源于stack exchange，提问作者AlZ