如何在TypeScript中结合useContext使用useRef（Next.js场景）

数据老陈

2026-7-16

问题根源与修正方案

你的核心问题是BookingContext的类型定义未包含userAuth属性，同时存在几处TypeScript语法和规范错误，以下是完整修正后的代码及说明：

1. 统一类型规范并扩展Context定义

先修正接口命名（遵循大驼峰规范），同时补充Context的完整类型：

interface TripAttributes {
  tripTitle: string;
}

// 定义Context的完整类型，包含新增的userAuth
type BookingContextType = {
  tripsData: TripAttributes;
  setTripData: React.Dispatch<React.SetStateAction<TripAttributes>>;
  // 用MutableRefObject，因为需要修改current属性
  userAuth: React.MutableRefObject<null | string>;
};

2. 更新Context初始值

新增userAuth后，必须在Context初始值中补充对应默认值：

const initialTripState: TripAttributes = {
  tripTitle: '',
};

export const BookingContext = createContext<BookingContextType>({
  tripsData: initialTripState,
  setTripData: () => {}, // 空函数作为默认即可
  userAuth: { current: null }, // 模拟MutableRefObject的初始结构
});

3. 修正BookingProvider中的错误

修正useRef的类型声明（不需要套RefObject，直接指定存储值的类型）
修复Provider标签的错误闭合方式
修正props的类型定义

export const BookingProvider = ({ children }: { children: React.ReactNode }) => {
  const [tripsData, setTripData] = useState<TripAttributes>(initialTripState);
  // 直接指定存储值的类型，useRef会返回MutableRefObject
  const userAuth = useRef<null | string>(null);

  return (
    <BookingContext.Provider value={{ tripsData, setTripData, userAuth }}>
      {children}
    </BookingContext.Provider> {/* 修正闭合标签 */}
  );
};

4. 全局访问与更新示例

在任意子组件中即可正常操作userAuth：

import { useContext } from 'react';
import { BookingContext } from './path-to-context-file';

const AuthComponent = () => {
  const { userAuth } = useContext(BookingContext);

  const updateAuthStatus = () => {
    // 直接修改current属性完成状态更新
    userAuth.current = 'authenticated-user-id';
  };

  return <button onClick={updateAuthStatus}>更新授权状态</button>;
};

关键错误说明

Context类型不匹配：原Context类型仅定义了tripsData和setTripData，新增userAuth后必须同步更新类型，否则TypeScript会提示属性不存在。
useRef类型错误：RefObject是用于DOM元素的引用类型，若用useRef存储普通值（字符串、null），直接指定值的类型即可，useRef会返回允许修改current的MutableRefObject。
语法细节错误：接口名拼写混乱、Provider标签闭合错误、props类型定义不规范，这些都会导致TypeScript报错或组件异常。

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