React Axios发起GET请求调用Spring后端报空指针异常如何解决？

问题根因 #

你遇到的空指针异常完全是参数传递和前端生命周期的问题，具体触发链路如下：

1. React Router v6 的 useParams 返回的所有参数默认是字符串类型，且你的 useEffect 没有指定依赖数组，组件首次渲染时路由参数还未完成解析，拿到的 params.id 为 undefined，拼接后请求路径变为 http://localhost:8080/admin/perfume/undefined
2. Spring MVC 绑定路径参数时，无法将字符串 "undefined" 转为 int 类型，会给路径变量赋值为 null
3. 你的 Controller 方法形参是基本类型 int id，JVM 会自动将 null 拆箱为基本类型，此时直接抛出空指针异常，异常触发在参数绑定阶段，根本没有进入调用 Service 的逻辑，这和你单元测试正常的表现完全吻合。

修复方案 #

前端修改 #

首先修正详情组件的逻辑，补全参数校验、useEffect 依赖和类型声明：

function MyPerfume(): JSX.Element {
    const [state, setState] = useState<any>('');
    // 给useParams加泛型明确参数类型
    const { id } = useParams<{id: string}>();

    async function send() {
        // 非空校验，避免无效请求
        if (!id) return;
        // 转换为数字类型，避免字符串参数问题
        const numId = parseInt(id, 10);
        if (isNaN(numId)) return;
        try {
            const response = await axios.get<PerfumeModel>(`http://localhost:8080/admin/perfume/${numId}`);
            console.log(response.data);
            setState(response.data);
            store.dispatch(onePerfumesAction(response.data)); 
        } catch (err) {
            alert(err)
        }
    }

    // 仅当id变化时才触发请求，避免无限执行
    useEffect(() => {
        send();
    }, [id]);
    
    return (
        <div className="MyPerfume">
            {/* 这里补充你的详情渲染逻辑 */}
        </div>
    );
}

后端兼容优化（可选） #

可以将 Controller 形参改为包装类型，提前做参数校验，避免类似空指针问题：

@GetMapping("/perfume/{id}")
@ResponseStatus(HttpStatus.OK)
public Perfume getOnePerfume(@PathVariable Integer id) throws DoesNotExistException {
    if (id == null || id <= 0) {
        throw new IllegalArgumentException("无效的香水ID");
    }
    return admin.getOnePerfume(id);
}

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