配列の引数をスプレッド構文で受け取り、かつデフォルト値を設定したい

どこで使うか

配列をpropsとしてスプレッド構文で受け取りたいことは多々あると思う。

親コンポーネント

const ParentComponent = () => {
    const user = ["Taro", 20]
    return (
        <ChildComponent user={user} />
    )
}

受け取ったあとに再代入が必要な例

const ChildComponent = (props) => {
    const [name, age] = props.user
    return <p>{name}は{age}歳です。</p>
}

スプレッド構文で受け取る例

const ChildComponent = ({user: [name, age]}) => {
    return <p>{name}は{age}歳です。</p>
}

// ちなみにreturnだけなら、１行で書く方が好き。
const ChildSuperComponent = ({user: [name, age]}) => <p>{name}は{age}歳です。</p>

しかし、上記の例だと、仮にuserというpropsが渡されなかった場合、スプレッドすることができずに以下のようなエラーとなってしまう。

Uncaught TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

スプレッド構文で受け取る場合のデフォルト値

そこで、下記のようにデフォルト値を設定することで、エラーを回避する。

スプレッド構文で受け取る例(デフォルト値あり)

const ChildComponent = ({user: [name, age]=["name", 1]}) => <p>{name}は{age}歳です</p>

私はこれを以下のように書いてしまい解決に時間がかかってしまった。なんとなくできそうな気がしたのだが。。反省。

間違い

const ChildComponent = ({user: [name="name", age=1]}) => <p>{name}は{age}歳です</p>