Next.js 14+TypeScript项目类型错误：属性不存在于数组类型

问题根源 #

触发类型错误的核心原因有两个：

• jobApplicationTimeline是Prisma关联查询返回的数组，但你直接把它当成单个对象访问typeOfUpdate和updateDate属性
• AccordionContent组件的类型定义冗余，你额外传入了单个的typeOfUpdate和updateDate，但组件内部本来就是遍历数组渲染每个时间线项，这两个props完全多余

修正步骤 #

1. 修复AdminJobApplicationCard组件

移除错误的单个属性传递，直接传递整个时间线数组，同时去掉不安全的any[]断言：

// components/job-applications-card.tsx
import { db } from '@/lib/db'; // 替换为你的Prisma客户端实际导入路径
import AccordionContent from './accordion-content';

interface AdminJobApplicationCardProps {
    params: {
        id: string;
    };
}

export default async function AdminJobApplicationCard({ params }: AdminJobApplicationCardProps) {
    const job = await db.jobApplication.findUnique({
        where: { id: params.id },
        include: {
            jobApplicationTimeline: { orderBy: { updateDate: "asc" } },
            jobCategory: true,
        }
    });

    // 处理job为null的情况，避免后续渲染报错
    if (!job) return <div>求职申请不存在</div>;

    return (
        <AccordionContent 
            jobTitle={job.jobTitle}
            jobApplicationTimeline={job.jobApplicationTimeline}
        />
    );
}

2. 修复AccordionContent组件

简化类型定义，使用Prisma自动生成的类型代替any[]，并移除多余的props：

// components/accordion-content.tsx
import dayjs from 'dayjs';
import { PiPaperPlaneTiltDuotone } from 'react-icons/pi';
import { Collapse, Text } from '@/components/ui'; // 替换为你的UI组件实际导入路径
// 导入Prisma自动生成的类型，确保路径正确
import type { JobApplicationTimeline } from '@prisma/client';

type AccordionContentProps = {
  jobTitle: string;
  jobApplicationTimeline: JobApplicationTimeline[];
};

const AccordionContent = ({ jobTitle, jobApplicationTimeline }: AccordionContentProps) => {
  return (
    <>
      <Collapse>
        {jobApplicationTimeline.map((item, index) => (
          <div key={index} className="grid grid-cols-8">
            <div className="hidden flex-col gap-0.5 lg:col-span-2 lg:flex"></div>
            <div className="relative col-span-1 mt-1.5">
              <Text
                as="span"
                className="relative z-10 mb-1.5 block h-3 w-3 rounded-full before:absolute before:-left-1.5 before:-top-1.5 before:-z-10 before:h-6 before:w-6 before:rounded-full before:bg-white dark:bg-gray-900 dark:before:bg-gray-50"
              >
                <PiPaperPlaneTiltDuotone className="h-3 w-3" />
              </Text>
              <Text
                as="span"
                className="absolute left-[5px] top-[18px] block h-full w-[2px] bg-gray-200"
              ></Text>
            </div>

            <div className="col-span-7 flex flex-col pb-9 lg:col-span-5">
              <Text as="span" className="font-semibold text-gray-900">
                {/* 处理updateDate为null的情况，显示默认文本 */}
                {item.updateDate ? dayjs(item.updateDate).format("DD/MM/YYYY") : '无日期'}
              </Text>
              <Text as="span" className="text-sm text-gray-900">
                {item.typeOfUpdate}
              </Text>
            </div>
          </div>
        ))}
      </Collapse>
    </>
  );
};

export default AccordionContent;

关键说明 #

• 使用Prisma自动生成的JobApplicationTimeline类型代替any[]，让类型检查更严格，避免潜在错误
• 移除了多余的typeOfUpdate和updateDate props，组件直接从时间线数组的每个项中获取这些值
• 增加了job为null的判断，以及updateDate为null的处理，提升代码健壮性

内容的提问来源于stack exchange，提问作者Luis Gonçalves