你让 AI 写了一个功能，跑起来直接白屏了

有没有经历过这种场景：你用 Cursor 的 Composer 让 AI 帮你写一个"用户注册"功能，它唰唰唰生成了好几个文件，你信心满满地 Accept All，然后 npm run dev——

浏览器白屏了。控制台一片红色。

或者更坑的：页面看起来正常，但你点"提交"按钮没任何反应。打开 Network 一看，API 返回了 500。

先别崩溃。这不是你的问题，也不是 AI "太蠢"。AI 生成的代码有 Bug 是常态，没有 Bug 才是意外。 关键不是怎么避免 Bug（你避免不了），而是怎么快速定位和修复。

AI 最常犯的五类错误

我用了差不多两年的 AI 编程工具，总结出 AI 最爱犯的几类错误。你记住这个清单，以后遇到 Bug 先对照着排查，效率能提升一大截。

第一类：import 错误——引用了不存在的东西

这是出现频率最高的。AI 会 import 一个你项目里根本没有的包、一个不存在的组件、或者一个路径写错的模块。

// AI 经常干的事情：
import { Button } from '@/components/ui/button';  // 你项目里根本没有这个文件
import dayjs from 'dayjs';  // 你没装 dayjs，项目用的是 date-fns
import { useAuth } from '@/hooks/useAuth';  // 文件存在，但它导出的名字叫 useAuthentication

为什么会这样？因为 AI 的训练数据里这些写法太常见了。@/components/ui/button 是 shadcn/ui 的标准路径，所以 AI 觉得你肯定有。但你的项目可能根本没用 shadcn/ui，或者组件叫别的名字。

识别特征：报错信息里会有 Module not found、Cannot find module、is not exported from。

第二类：类型错误——TypeScript 编译不过

AI 写 TypeScript 的时候，经常会写出类型不匹配的代码。最经典的是把 string | undefined 当成 string 来用，或者给一个函数传了多余的/缺少的参数。

// AI 写的：
const userName = user.name.toUpperCase();  // user.name 可能是 undefined

// 还有这种：
const result = await fetchData(id, token, locale);
// 但 fetchData 的签名是 fetchData(id: string, token: string)，没有第三个参数

识别特征：Type 'xxx' is not assignable to type 'yyy'、Property 'xxx' does not exist on type 'yyy'、Expected N arguments, but got M。

第三类：API 和数据结构不匹配

这个坑比较隐蔽。AI 会假设后端 API 返回的数据结构是某种样子，但实际上不是。

// AI 以为 API 返回的是：
const { data: users } = await api.get('/users');
users.map(u => u.name);

// 实际 API 返回的是：
// { success: true, data: { list: [...], total: 100 } }
// 所以 users 其实是 { list: [...], total: 100 }，不能直接 .map()

识别特征：TypeError: xxx.map is not a function、Cannot read properties of undefined、页面某个地方显示 [object Object] 而不是正常文字。

第四类：版本和 API 变更

AI 的训练数据有截止时间，它可能会用老版本的 API 写法。Next.js 这种更新特别快的框架最容易中招。

// AI 可能写出 Next.js 12 的写法：
export async function getServerSideProps() { ... }

// 但你的项目用的是 Next.js 14 App Router，应该是：
export default async function Page() {
  const data = await fetch(...);
  ...
}

识别特征：xxx is not a function、xxx is deprecated、或者功能看起来实现了但行为不对。

第五类：逻辑错误——代码能跑但结果不对

这是最难发现的。代码不报错，页面也能渲染，但业务逻辑是错的。比如价格计算少乘了税率、权限判断反了、分页从 0 开始但 UI 从 1 开始。

说实话，这类错误你不能指望靠报错日志发现。你必须实际去用一下，点一点，看看数据对不对。这就是为什么 Vibe Coding 不是"让 AI 写完就完了"——你还得做验证。

一个统计数据

我自己做过一个粗略的统计：在用 Cursor 做了 3 个完整项目之后——

import 错误占了快一半，但修起来也最快。真正头疼的是逻辑错误——因为你可能用了好几天都没发现。