使用React Context时，如何指定initialValue类型以解决类型错误？

问题场景 #

尝试将消息状态与操作方法合并到同一个React Context时，出现TypeScript类型不匹配错误。出错代码如下：

'use client';

import { useState, createContext, useMemo } from 'react';

type MessageStatus = 'default' | 'success' | 'error';

export type MessageProps = {
  type: MessageStatus;
  payload: string;
};

type ContextType = [
  MessageProps[],
  {
    add(message: MessageProps): void;
  },
];

export const MessageContext = createContext<ContextType | null>(null);

export function MessageProvider({ children }: { children: React.ReactNode }) {
  const [messages, setMessages] = useState<MessageProps[]>([]);
  const actions = useMemo(
    () => ({
      add(message: MessageProps) {
        setMessages((prev) => prev.concat([message]));
        setTimeout(
          () => setMessages((prevMessages) => prevMessages.slice(1)),
          5000,
        );
      },
    }),
    [],
  );
  const value = useMemo(() => [messages, actions], [messages, actions]);
  return (
    <MessageContext.Provider value={value}>{children}</MessageContext.Provider>
  );
}

触发的TypeScript错误：

Type '(MessageProps[] | { add(message: MessageProps): void; })[]' is not assignable to type '[MessageProps[], { add(message: MessageProps): void; }]'.
  Target requires 2 element(s) but source may have fewer.ts(2322)

而将状态与方法拆分到两个独立Context的代码可正常运行：

export const MessageContext = createContext<MessageProps[] | null>(null);
export const MessageActionsContext = createContext<{
  add(message: MessageProps): void;
} | null>(null);
export function MessageProvider({ children }: { children: React.ReactNode }) {
  const [messages, setMessages] = useState<MessageProps[]>([]);
  const actions = useMemo(
    () => ({
      add(message: MessageProps) {
        setMessages((prev) => prev.concat([message]));
        setTimeout(
          () => setMessages((prevMessages) => prevMessages.slice(1)),
          5000,
        );
      },
    }),
    [],
  );
  return (
    <MessageContext.Provider value={messages}>
      <MessageActionsContext.Provider value={actions}>
        {children}
      </MessageActionsContext.Provider>
    </MessageContext.Provider>
  );
}

错误原因 #

TypeScript会自动把[messages, actions]推断为数组类型（元素类型为MessageProps[]或操作对象的联合类型），但我们定义的ContextType是元组类型（固定长度为2，且每个位置的类型固定），两者类型不兼容，因此触发错误。

解决方案 #

方法一：显式指定元组类型 #

在useMemo中明确指定返回类型为ContextType，让TypeScript知道这是一个固定结构的元组，而非普通数组：

const value = useMemo<ContextType>(() => [messages, actions], [messages, actions]);

或者使用类型断言：

const value = useMemo(() => [messages, actions] as ContextType, [messages, actions]);

方法二：优化initialValue定义（可选） #

如果不想在使用useContext时处理null的情况，可以给createContext提供一个符合ContextType的默认值，而非null：

export const MessageContext = createContext<ContextType>([
  [],
  { add: () => {} }, // 空实现的默认方法
]);

这样后续组件中使用useContext(MessageContext)时，无需判断值是否为null，代码更简洁安全。

修改后的完整代码示例 #

'use client';

import { useState, createContext, useMemo } from 'react';

type MessageStatus = 'default' | 'success' | 'error';

export type MessageProps = {
  type: MessageStatus;
  payload: string;
};

type ContextType = [
  MessageProps[],
  {
    add(message: MessageProps): void;
  },
];

export const MessageContext = createContext<ContextType | null>(null);

export function MessageProvider({ children }: { children: React.ReactNode }) {
  const [messages, setMessages] = useState<MessageProps[]>([]);
  const actions = useMemo(
    () => ({
      add(message: MessageProps) {
        setMessages((prev) => prev.concat([message]));
        setTimeout(
          () => setMessages((prevMessages) => prevMessages.slice(1)),
          5000,
        );
      },
    }),
    [],
  );
  // 显式指定元组类型
  const value = useMemo<ContextType>(() => [messages, actions], [messages, actions]);
  return (
    <MessageContext.Provider value={value}>{children}</MessageContext.Provider>
  );
}

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