TypeScript报错：类型'[]'不存在属性'items'，求解决方法

错误原因 #

• 上下文类型定义错误：createContext<[]>([])将top250Movies的类型强制设为空数组，但你实际期望的是包含titles数组的对象，TypeScript会严格按照定义的类型做检查，所以当你尝试访问backendData.items时，数组类型根本没有这个属性，直接触发报错。
• 状态初始化与类型混乱：useState<any>('')把初始状态设为字符串，后续又赋值为database（目标对象），这种类型摇摆会让TypeScript无法正确推断数据类型，进一步加剧类型不匹配问题。
• 逻辑判断错误：你在Homepage里判断backendData是数组后去访问items，但你期望的结构是对象包含titles数组，这里的判断和属性访问完全不符合预期数据结构。

修复方案 #

步骤1：定义明确的TypeScript接口 #

先为你的数据结构创建接口，明确类型约束：

// 可放在context.tsx顶部或单独的types文件中
interface Movie {
  // 替换成你实际的电影字段，比如id、标题、评分等
  id: number;
  title: string;
}

interface MovieData {
  titles: Movie[];
}

步骤2：修正Context与状态的类型定义 #

修改context.tsx中的Context创建、状态初始化和赋值逻辑，同时用useEffect避免无限重渲染（原代码直接在组件函数内调用setTop250会触发无限循环）：

import React, { createContext, useState, useEffect } from 'react'
import database from '../database';

interface Movie {
  id: number;
  title: string;
}

interface MovieData {
  titles: Movie[];
}

// 将Context类型设为MovieData | null，初始值设为null更合理
const top250Movies = createContext<MovieData | null>(null);

const MoviesContext: React.FC = ({ children }) => {
    // 状态类型设为MovieData | null，初始值为null
    const [top250, setTop250] = useState<MovieData | null>(null);

    // 用useEffect执行初始化逻辑，仅在组件挂载时运行一次
    useEffect(() => {
        if (!top250) {
            setTop250(database);
        }
    }, [top250]);
  
    return (
        <top250Movies.Provider value={top250}>
            {children}
        </top250Movies.Provider>
    )
}

export default MoviesContext
export { top250Movies, MovieData }

步骤3：修正Homepage中的数据访问逻辑 #

根据你期望的{titles: [array]}结构，调整判断逻辑和属性访问：

import React, { useContext } from 'react'
import { top250Movies, MovieData } from '../context/context'
import Footer from '../layouts/Footer'
import Navbar from '../layouts/Navbar'
import '../styles/Homepage.css'

function Homepage() {
    const backendData = useContext(top250Movies);
 
    // 判断backendData存在且符合MovieData结构
    if (backendData && Array.isArray(backendData.titles)) {
        // 访问titles数组并处理
        console.log(backendData.titles.map(item => item));
    }

    return (
        <div className='Homepage'>
            <Navbar/> 
            <div className="Homepage-content">Homepage</div>  
            <Footer/>
        </div>
    )
}

export default Homepage

额外建议 #

• 彻底抛弃any类型，为所有数据结构定义明确的接口，这样TypeScript能提供完善的类型检查和代码提示，从根源减少类型错误。

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