Why is my tracks array empty in my presentational component? - ruby-on-rails

Question

I've been working on this bug for a few hours now, and I think I've narrowed it down to these pieces of code:
// my track detail container:
import { connect } from 'react-redux';
import TrackDetail from './track_detail';
import { selectTracksFromPlaylist } from '../../reducers/selectors';
const mapStateToProps = (state, { playlistId }) => ({
tracks: selectTracksFromPlaylist(state, state.entities.playlists[playlistId])
});
export default connect(mapStateToProps)(TrackDetail);
// my track detail presentational component:
import React from 'react';
import TrackIndexItem from './track_index_item';
const TrackDetail = ({ tracks }) => (
<ul>
{ tracks.map(track => <TrackIndexItem key={track.id} track={track} />) }
</ul>
);
export default TrackDetail;
// my selector that I'm using to select all tracks from a playlist:
export const selectTracksFromPlaylist = (state, playlist) => (
playlist.track_ids.length > 0 ? playlist.track_ids.map(id => state.entities.tracks[id]) : []
);
// the component that's rendering my TrackDetail:
import React from 'react';
import { Route } from 'react-router-dom';
import TrackDetail from '../track/track_detail_container';
class PlaylistDetail extends React.Component {
componentDidMount() {
this.props.requestSinglePlaylist(this.props.match.params.playlistId);
}
render() {
const { playlist } = this.props;
if (!playlist) return null;
return (
<div className="playlist-detail-container">
<div className="playlist-detail-header">
<p>Playlist</p>
<h1>{ playlist.title }</h1>
<p>
Created by <span>{playlist.user}</span> • {playlist.track_ids.length} songs
</p>
</div>
<div className="playlist-detail-tracks">
<TrackDetail playlistId={ playlist.id } />
</div>
</div>
);
}
}
export default PlaylistDetail;
This happens every time I try accessing the page normally (without physically doing a refresh; if I refresh the screen after this error pops up, it works):
Uncaught TypeError: Cannot read property 'id' of undefined